i use apollo client and react in project

i want appear loading indicator while network request, so i set react variables and change it inside apollo link

but it cause cannot update component(Indicator) while rendering a diffrend component(component that call useQuery hook)

• loadingLink.ts

import { ApolloLink } from '@apollo/client';
import { loadingVar } from 'gql/store/reactiveVariables';

export const loadingLink = new ApolloLink((operation, forward) => {
  loadingVar(true);

  return forward(operation).map(data => {
    loadingVar(false);

    return data;
  });
});

• loadingIndicator.ts

import React from 'react';
import { useReactiveVar } from '@apollo/client';
import { loadingVar } from 'gql/store/reactiveVariables';
import { Indicator } from './Indicator';

const LoadingIndicator: React.FC = () => {
  const loading = useReactiveVar(loadingVar);

  if (!loading) return null;

  return <Indicator />;
};

export default LoadingIndicator;

• error message

error message

• BatchList.tsx

const BatchList = () => {
  const {data, error} = useQuery(~~~);

  if(error) return null;
  if(loading || !data) return null;

  return ~~~~
}

in documentation, they say should use useEffect hook but inside ApolloLink i can't use useEffect hook

How can i fix it