Seed useQuery on load (hydrate from server-side)

[Noitidart]

On page load, the server provides my frontend the data to me for a list. I want to useQuery but not initially fetch, instead I want to tell useQuery, use this data but pretend you just fetched. And then after this point, everything works as normal, invalidating this will cause it to refetch.

Is this possible?

[TkDodo]

I think it’s all here: https://react-query.tanstack.com/guides/ssr

if you have a custom solution, just passing initialData also works - it’s what it is for :)

[Noitidart]

Oh wow thank you! I'm a horrible reader and searcher! Thanks for your help sir!

[Noitidart]

I was using the initialData with typescript but had an issue. Typescript things foo.data can be undefined even though I provided initialData. Is it possible to tell typescript it is definitely there? I tried this:

const foos = useQuery<Foo[]>(...., { initialData: [] });

foos.data.map(); /// typescrpt underliens this as error saying `foos.data is maybe undefined`

[TkDodo]

It is not. I’m on mobile, it has been asked multiple times before, please have a look.

[Noitidart]

Oh thanks sorry about that. Really appreciate your help I know this can be annoying.