Cache as Backup but cache is never used

I wanted to use React Query to:
1) Cache data so it gets only retrieved from the backend every 5 min and no requests are wasted
2) Use Cached data if the internet connection is lost

This is how I setup my client:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 3, // 3 minutes
      gcTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    },
  },
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 3, // 3 minutes
      gcTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    },
  },
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 3, // 3 minutes
      gcTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    },
  },
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 3, // 3 minutes
      gcTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    },
  },
});

And this is how i use my api for testing atm just a GET Request with all data from my backend

const {data: ratings, isLoading, refetch } = useQuery({
        queryFn: () => fetchAllRatings(),
        queryKey: ['ratings'],
    });

const {data: ratings, isLoading, refetch } = useQuery({
        queryFn: () => fetchAllRatings(),
        queryKey: ['ratings'],
    });

const {data: ratings, isLoading, refetch } = useQuery({
        queryFn: () => fetchAllRatings(),
        queryKey: ['ratings'],
    });

const {data: ratings, isLoading, refetch } = useQuery({
        queryFn: () => fetchAllRatings(),
        queryKey: ['ratings'],
    });

However for some reason it ALWAYS seems to retrieve from the backend and also when the connection is lost it just pauses the query. What am I doing wrong?

I also set up so it know when its online like shown in the docs

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected);
  });
  return eventSubscription.remove;
});

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected);
  });
  return eventSubscription.remove;
});

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected);
  });
  return eventSubscription.remove;
});

onlineManager.setEventListener((setOnline) => {
  const eventSubscription = Network.addNetworkStateListener((state) => {
    setOnline(!!state.isConnected);
  });
  return eventSubscription.remove;
});

Here a demonstration of my issue
https://youtu.be/R27mCA9-IuU

YouTubeSwordCreeper

React Query Issue

Cache as Backup but cache is never used

Similar Threads

Similar Threads

Similar Threads