xenial-black

useQuery always refetching

Hi 👋 I'm new to using useQuery and I think I already follow the instructions from the documentation, so here is the snippet of my code,

const { data, isLoading, error } = useQuery({
    queryKey: ["financialSankey", ticker],
    queryFn: () => fetchReport(ticker),
    staleTime: 1000 * 60 * 60, // 1 hour
    refetchInterval: false,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });

as you can see I already try to set the staleTime and also set all the refetch options to false. But when I check on the network tab, it always refetching. Is there something wrong with my understanding?

14 Replies

rival-black•2y ago

https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

React Query FAQs

Answering the most frequently asked React Query questions

xenial-blackOP•2y ago

Hi @TkDodo 🔮 my QueryClient already made the same as the stable-query-client example

const TanstackProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default TanstackProvider;

am I missing something?

rival-black•2y ago

looks good, can you reproduce it in codesandbox ?

xenial-blackOP•2y ago

Sorry, but I am new to these things so I am afraid I don't know how to reproduce it. But maybe will it be a problem if TanstackProvider is being used in the RootLayout component inside the layout.tsx file? also, should I set the gcTime the same as staleTime?

adverse-sapphire•2y ago

What is ticker? If that’s a changing value like on a setInterval or something then your queryKey would change in turn calling the queryFn again

xenial-blackOP•2y ago

@troywoy ticker is part of the url so the url basically looks like this: http://localhost:3000/idx/[ticker] the fetchReport(ticker) will try to get the data from db (I'm using supabase) based on which ticker is being access

adverse-sapphire•2y ago

Okay I was just taking a wild guess. Like Dominik said next step would be a reproduction then

xenial-blackOP•2y ago

Thanks @troywoy but actually is the way I use the useQuery correct? should I set the gcTime too? What I want is to only refetch the data after 1 hour

adverse-sapphire•2y ago

You just need staleTime for that

xenial-blackOP•2y ago

so no need to set all those 'refetch' option then?

adverse-sapphire•2y ago

Not necessarily. We disabled things like refetchOnWindowFocus on our queryClient because tabbing away and back in was an unwanted refetch for us

xenial-blackOP•2y ago

So if it hasn't been disabled in the queryClient, then I still need to set it as above?

adverse-sapphire•2y ago

Setting options on the queryClient means it’ll be the default for all your queries useQuery options has higher priority, but if you’re defining the same options over and over then put it on the queryClient

xenial-blackOP•2y ago

okay understood. maybe my last question will be the one above. will it make any difference when we use the queryClient in a root file called app or something with the one I currently do which is using it in the RootLayout component in layout.tsx file? Oh I think that one is correct, thank you for the help @troywoy @TkDodo 🔮

Gaming

Programming

useQuery always refetching

Did you find this page helpful?