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

TanStack•4y ago•

3 replies

foolish-indigo

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads