initialData affecting "status" variable?

[mattrothenberg]

Howdy again!

I'm noticing something weird when I use the initialData option with useQuery in an SSR context. When my component mounts, status starts off as "success" which is what I expect. However, when one of my query key changes and my query function fires, status remains as "success" which I don't expect. I would expect this variable to cycle through loading, success, and error as it would normally.

https://codesandbox.io/s/relaxed-wilson-rp8dp?file=/src/App.js

I'm fairly new to the land of SSR – perhaps I'm misunderstanding the role of initialData in pre-populating a query with data from the server?

[tannerlinsley]

initialData should correspond to the query key you are sending it. If you change the key and not the initial data, you are simply sending in that same initial data to the next query key.

[tannerlinsley]

In your example, you're right, it doesn't make much sense, because your initial data is hard coded. It makes more sense when you have something like getStaticProps in Next.js that is supplying the initial data for whatever page you attempting to view, based on a route parameter. When your router parameter changes for that page component, your query key would probably also change, and the initial data would change with it. Without a dynamic SSR example, it's hard to illustrate, and honestly, that's the main situation that initialData is used for.

[mattrothenberg]

Hmm, I see what you're saying. I think I did a bad job articulating/exemplifying my issue.

I'm using Next.js to server-render a page. When the page loads, it fetches a list of accounts in getServerSideProps. This list of accounts is then passed down via props to a component that presents them in a fancy table (kudos to you for react-table as well 😛).

This table has a bunch of UI controls for filtering the data, (e.g., by timeframe) and because changing these filters involves asking my API for new data, I'm using react-query to coordinate subsequent requests from the client to the API. I was hoping to pass the initial data fetched in getServerSideProps to RQ via the initialData option, such that I could avoid another round trip when the component mounts. Then, changing any of the filters would go ahead and fetch new data and we'd be off to the races.

What doesn't make sense to me is that I'm pre-populating the state UI controls according to how I asked my API for data in getServerSideProps. For example, I'm initially doing GET /api/accounts?timeframe=foo, and when my Table component loads, it's doing the following –

const [timeframe, setTimeframe] = React.useState('foo');
const { data } = useQuery(['accounts', timeframe], api.fetchAccounts, {initialData: initialAccounts})

However, react-query will not fire off another request until I change timeframe at least 3 times, as shown in the video below. Something feels off here.

Does that make sense?

[tannerlinsley]

Yep. If this is the case, then I would do this:

const [initialData, setInitialData] = React.useState(initialAccounts)

React.useEffect(() => {
  setInitialData(undefined)
}, [])

const [timeframe, setTimeframe] = React.useState('foo');
const { data } = useQuery(['accounts', timeframe], api.fetchAccounts, { initialData })

[mattrothenberg]

Worked like a charm. Thanks so much for your help!

[scape76]

@TkDodo what about this useEffect?

[TkDodo]

The 2024 version without state and effect:

const [timeframe, setTimeframe] = React.useState('foo');
const { data } = useQuery({
  queryKey: ['accounts', timeframe],
  queryFn: api.fetchAccounts,
  initialData: timeframe === 'foo' ? initialAccounts : undefined
})