typescript - Apollo hämtar om gör inte en förfrågan efter nätverksfel

Kontext

Vi utvecklar för närvarande en React Native iOS-app med en GraphQL-backend. Inom denna app vill vi visa en modal för användaren när det inte finns någon internetanslutning eller när API:et är nere.

Eftersom vi använder Apollo och graphql-code-generator, har vi en genererad hook i komponenten som hämtar datan. Vi visar modalen när hooken returnerar ett nätverksfel. Om ett nätverksfel har hittats används refetch-metoden från hooken för att poll:a och se om nätverket eller API:et är igång igen.

Problemet

Detta verkar tyvärr inte fungera, anrop till refetch-metoden efter att nätverket har återställts resulterar inte i några förfrågningar. refetch-metoden kastar också ett nätverksfel.

Kod

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]);
}

Forskning & Försök

Vi kom fram till att felet inte rensas som specificerat i den här artikeln. Så denna hook kommer fortsätta att visa modalen för ingen internetuppkoppling och göra förfrågningar. Problemet kvarstår dock ändå efter denna ändring, refetch-metoden gör helt enkelt inte en förfrågan till API:et. Vi försökte också rensa cachen, men tyvärr utan resultat. Så jag är inte riktigt säker på vad jag ska prova just nu för att få detta att fungera, alla råd skulle uppskattas mycket!

REDIGERA

Skapade ett litet Expo-snack (kodsnutt) som kunde återskapa problemet på ett enklare sätt. Här är problemet inte närvarande! Har fortfarande ingen aning om varför detta problem kvarstår i vår app, så all feedback är välkommen!

prata