Setting initialData does not stop immediate refetch

[adammsteele]

If i pass initialData to the useQuery hook, it doesn't seem to prevent an immediate call to the query function. I am using getInitialProps from next.js and when a client side route transition takes place, the query function is called twice, once from getInitialProps and then once again when the component is mounted. Is this intentional? It does not seem to occur when using swr in the same situation.

Here is a short sample to illustrate what I mean exactly:

import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
import {useQuery} from 'react-query';

const getAccounts = async () => {
  console.log('called here second');
  const response = await fetch(`http://localhost:8000/api/accounts/`);
  const data = await response.json();
  return data;
}

function Accounts({ initialData }) {
  const { status, data, error} = useQuery(
    'accounts',
    getAccounts,
    {
      initialData
    }
  )

  if (status === 'error') return <div>Failed to load accounts: {error.message}</div>
  if (status === 'loading') return <div>Loading...</div>

  return (
    <ul>
        {data.map(account => (
          <li key={account.id}>
            <Link href="/accounts/[id]" as={`/accounts/${account.id}`}>
              <a>{`Account ${account.id}`}</a>
            </Link>
          </li>
        ))}
      </ul>
  );
};

Accounts.getInitialProps = async () => {
  console.log('called here first');
  const response = await fetch(`http://localhost:8000/api/accounts/`);
  const data = await response.json();
  return { initialData: data };
};

export default Accounts;

I would have expected setting the initialData to negate the first call of the query function.

[tannerlinsley]

Do you have a codesandbox you can show us? Our tests check for this functionality, so we'll need a reproduction example to debug it more closely.

[adammsteele]

Here you go: https://codesandbox.io/s/restless-feather-v9cr8

I wouldn't expect getData to be run on the first render, but it is.

[tannerlinsley]

So after looking at that codesandbox, I can confirm that this is actually intended behavior. initialData on it's own is not enough to keep the query from refetching when it mounts, since initialData's main purpose is to allow you to set data that is available during SSR, and that's it. Once the query mounts, its default behavior is to refetch the data again.

The recommended way to stop the query from automatically doing anything at any time, is to set manual to true. Toggling a query's manual state after the fact won't trigger a refetch, so you can use it to reliably pause a query's auto refetching functionality as I have shown in this codesandbox example:

https://codesandbox.io/s/jovial-payne-i6qen?file=/pages/index.js

[pixxelfriend]

Whoever read this, even after 2 years. This behaviour can still be recreated and its still reality.
I solved it by setting the staleTime in the useQuery to 10000ms. This way, react-query would only re-fetch the data if it was older than 10 seconds. This also saves an additional useState hook.

The query of the example above has to look like the following:

 const { status, data, error} = useQuery(
    'accounts',
    getAccounts,
    {
      initialData, 
      staleTime: 10000
    }
  )