uso el cliente apollo y reacciono en el proyecto

quiero que aparezca el indicador de carga mientras se solicita la red, así que configuro las variables de reacción y las cambio dentro del enlace de apollo

pero causa 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;

• mensaje de error

mensaje de error

• BatchList.tsx

 const BatchList = () => { const {data, error} = useQuery(~~~); if(error) return null; if(loading || !data) return null; return ~~~~ }

en la documentación , dicen que debería usar useEffect hook pero dentro de ApolloLink no puedo usar useEffect hook

Cómo puedo arreglarlo