T
TanStack•4y ago
continuing-cyan

Next.js - ReactQuery data is being refetched everytime route changes.

Hello. I made this simple demo, where react query forces refetch every time route changes, I want to disable this behavior. Is it possible? It does refetch only when previous response has been unsuccessful. In my specific example where I am getting user from API, I don't really want this kind of behavior, because it shows loading animation on every page change. 
const { data: me, isLoading } = useQuery(
  ["getUser"],
  () => fetch("https://api.com/api/me").then((res) => res.json()),
  {
    retry: 0,
    staleTime: 1000 * 60 * 60 * 8
  }
);
const { data: me, isLoading } = useQuery(
  ["getUser"],
  () => fetch("https://api.com/api/me").then((res) => res.json()),
  {
    retry: 0,
    staleTime: 1000 * 60 * 60 * 8
  }
);
Demo: https://codesandbox.io/s/silly-ptolemy-x0e0ih?file=/components/Nav.tsx
3 Replies
continuing-cyan
continuing-cyanOP•4y ago
My default query client options: 
defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}
defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}
automatic-azure
automatic-azure•4y ago
I'm on mobile now so can't fully check, but you're saying: API url is fake to simulate unlogged user (response fails) If the response fails and the query has no data, it will refetch unless you set retryOnMount: false
continuing-cyan
continuing-cyanOP•4y ago
Yeah, thank you. You answered my question.

Did you find this page helpful?