Theo's Typesafe Cult•2y ago

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. My default query client options:

defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}

defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}

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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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