typescript - Apollo il rifacimento della richiesta non effettua una richiesta dopo un errore di rete

Contesto

Attualmente stiamo sviluppando un'app iOS in React Native con un back-end GraphQL. All'interno di questa app vorremmo mostrare all'utente un modal quando non c'è connessione a Internet o quando l'API è inattiva.

Poiché stiamo usando Apollo e graphql-code-generator, abbiamo un hook generato nel componente che recupera i dati. Mostriamo la finestra modale quando l'hook restituisce un errore di rete. Se viene rilevato un errore di rete, viene utilizzato il metodo refetch dall'hook per effettuare il polling e vedere se la rete o l'API sono di nuovo operative.

Il Problema

Questo purtroppo non sembra funzionare, le chiamate al metodo refetch dopo che la rete è stata ristabilita non generano richieste. Il metodo refetch genera anche un errore di rete.

Codice

function useConnectionStatusPolling() {
  // 'useData' is a custom wrapper around the generated hook, that maps and deserialises fields.
  const { loading, refetch, error } = useData();

  // While refreshing, error.networkError is reset.But we would like
  // to keep the error status around until the request works again.
  //
  // For that, we keep the error in the mutable reference, and update it
  // only when the status it not loading. For loading, keep the
  // previous value.
  const networkError = useRef(false);
  if (!loading) {
    networkError.current = !!error?.networkError;
  }

  // Polling is done manually via useInterval because the builtin polling stops
  // if a network error is thrown which we want to ignore in our case.
  useInterval(refetch, networkError.current ? 5000 : "pause");
  return networkError.current;
}

/**
 * Executes a callback at each interval.
 * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 * @param callback Method to execute after each delay.
 * @param delay Time in miliseconds.
 */
export function useInterval(callback: () => void, delay: number | "pause") {
  const savedCallback = useRef<() => void>();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current?.();
    }
    if (delay !== "pause") {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Ricerca e tentativi

Abbiamo scoperto che l'errore non viene cancellato come specificato in questo articolo. Quindi questo hook continuerà a mostrare il modulo di assenza di connessione a Internet e a effettuare richieste. Tuttavia, questo problema persiste ancora dopo questa modifica, il metodo di refetch semplicemente non effettua una richiesta all'API. Abbiamo anche provato a svuotare la cache, ma purtroppo senza successo. Quindi non sono davvero sicuro di cosa provare al momento per far funzionare questo, qualsiasi consiglio sarebbe molto apprezzato!

MODIFICA

Ho creato un piccolo snack di Expo (frammento di codice) che potrebbe ricreare il problema in modo più semplice. Qui il problema non è presente! Tuttavia non ho ancora idea del perché questo problema persista nella nostra app, quindi ogni feedback è ben accetto!

spuntino