Infinity staleTime and cacheTime still hit server

[lukasa1993]

useQuery(['test_query', href],
    () => testQuery(href), {
      staleTime:                   Infinity,
      cacheTime:                   Infinity,
      keepPreviousData: true,
      enabled:          !!href
    })

this still hits server every time and in browser network tab till it finishes download it doesn't show image

[TkDodo]

please provide a reproducible codesandbox example. The react-query-devtools can also help narrow it down because they show you which state your query is in.

[lukasa1993]

i cant provide reproducible sample its private api. react-query-devtools also confirms that it refetches every time, i can grab any data from devtools if you point me to it

[TkDodo]

i cant provide reproducible sample its private api.

You can always "mock" out your actual queryFn in the example:

const testQuery = (href) => Promise.resolve(some-test-data-goes-here)

[lukasa1993]

not sure i follow if i mock it its not reproducible i am using creat-react-app and react-router in root i have

<QueryClientProvider client={queryClient}>
<BrowserRouter>
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

queryClient has no options provided
const queryClient = new QueryClient();

[TkDodo]

I just meant stubbing out the actual ajax request (replace axios.get with something that statically returns a Promise). We don't need to see it in the network tab - the devtools will show us when it's fetching. As the actual data layer is rarely the problem and also what's "private" about your code, this should suffice.

side question: is your queryClient maybe created inside your App function instead of outside of it?

[lukasa1993]

no its outside app function

[lukasa1993]

@TkDodo is axios required i am not using axios

[TkDodo]

No, this was just an example. All you need is a function that returns a Promise - doesn’t matter how.

[lukasa1993]

i am trying… i picked basic example from repo but it was missing eslint-config-prettier this dependency and even that wish 7kb data still refetches as is, i only added staleTime: Infinity, cacheTime: Infinity, on each useQuery still refetches still browser hits server

[TkDodo]

Do you have the codesandbox link please

[lukasa1993]

https://github.com/lukasa1993/react-query-test

[lukasa1993]

@TkDodo dependencies are outdates but its from this repos basic sample

[tannerlinsley]

It will hit the server at least once or even retry a few times until it’s successful. Tanner Linsley

…

On Jan 23, 2021, 9:28 AM -0700, luka dodelia ***@***.***>, wrote: https://github.com/lukasa1993/react-query-test — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[lukasa1993]

It will hit the server at least once or even retry a few times until it’s successful. Tanner Linsley
…

its successful every time it hits

[TkDodo]

I've taken that code and put it in a codesandbox: https://codesandbox.io/s/pedantic-heyrovsky-bvj5q?file=/src/index.js

one image is fetched when the page loads, and the query is then marked as fresh and is never refetched. So what exactly am I supposed to see here please?