Data is being re-fetched on window re-focus always, without consuming from cached data.

[mustafa-alfar]

Describe the bug

I have tested the useQuery on Github's username API and it works well. However, when I try it on an API that's deployed on Heroku, the data re-fetches on every refresh, I also made a small change between the two experiments, I add a shop key to the headers

To Reproduce
Steps to reproduce the behaviour:
here's the code.

import React from "react";
import axios from 'axios';
import { useQuery } from "react-query";

const config = {
  dev: {
    baseURL: 'https://bonat-ecommerce.herokuapp.com/api/v1',
    headers: {
      shop: 'https://bonat-dev.myshopify.com',
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
  },
};

export const dev = axios.create({ ...config.dev });

const getThemeAPI = async () => {
  const {data } = await  dev.get(`/customer/init`);
  return data;
}

export default function App() {
  const { isLoading, error, data } = useQuery("theme", getThemeAPI);

  if (isLoading) return <h1>Loading </h1>;
  if (error) return <h1>Error </h1>;
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Expected behaviour
Data should be consumed from the cached data as it also appears in the react-query dev-tools.

[chriszhangusc]

Could you elaborate on what you mean by refresh here? the data re-fetches on every refresh do you mean page refresh or leaving the tab and then come back?

Seems normal as react-query's default cache strategy will immediately mark the data as stale right after you fetched it, and the next time this query is active, it will present the stale data to the user immediately while sending out a background API call to get the fresh data. If the fresh data is different from the staled one, it will update the cache and the user will see the fresh data, if not nothing will happen(no rerender).

[adriangzz]

Is there a way to keep the cached data for page refreshes?

[chriszhangusc]

I think there is an open PR to add support for persisting query data for example in localStorage #728

[mustafa-alfar]

@chriszhangusc
I enabled refetchOnWindowFocus, and I tried to visit the window multiple times, I expect the data will be consumed from the cached. However, every page refocus, trigger the API network, then I tried a Github random user API, with the same settings, and it works as expected - consumed the data from caching -.
Here is the code sandbox example link's
https://codesandbox.io/s/react-query-m85xs?file=/src/App.js:660-680

[igor-pavlichenko]

@mustafa-alfar you need to add a config object to useQuery with staleTime in milliseconds. Otherwise the cache is always assumed as "outdated" and the background request is triggered.

  const { isLoading, error, data } = useQuery('theme', getThemeAPI, {
    refetchOnWindowFocus: true,
    // cached request will stay "fresh" for 10 seconds
    staleTime: 10000,
  });

[mustafa-alfar]

@igor-pavlichenko
Indeed it delayed the re-fetching till 10 seconds, but what I'm talking about is that the data has not been changed so why it's re-fetched from the server on every page refocus instead of consuming from the cached data, I do not know how the caching mechanism is work here so my question is does the server settings have anything to do with the caching?

[igor-pavlichenko]

@mustafa-alfar no, react-query has no idea if server-side data has changed since the last request.
If you have a way of knowing that - you can play with the configs staleTime, cacheTime, refetchOnWindowFocus, refetchOnRemount and manually invalidate cache when you know it has changed.

Check out the docs about it here

[mustafa-alfar]

@igor-pavlichenko
thank you, but I kind of knowing that, I meant is there any server settings that prevent the API's data from being cached by the front-end in react-query?, because Github random user API is consumed from the caching on window refocus,
but if I just change to another API with the same code, it fetches from the server every window refocusing,

I update the sandbox example, maybe it can explain what I mean.
https://codesandbox.io/s/react-query-m85xs?file=/src/App.js:660-680

[igor-pavlichenko]

@mustafa-alfar it doesn't happen for me. I uncommented your code and the behaviour is exactly the same (as expected).. no matter what I do - the background refetch doesn't happen.

[mustafa-alfar]

@igor-pavlichenko
I've just tried using Firefox and it's working as expected with /customer/init API,
but not in chrome, it's very odd behaviour, so it may be in my chrome browser,
I am going to test it on another device, Thank you.