Hydration for queries that don't have an observer

[pierrezimmermannbam]

I use a PersistQueryClientProvider in my app. When the app starts, my queries are hydrated. During hydration react-query tries to refetch them. The issue I have is that for some queries there is no observer attached and so they don't have any queryFn available. If a useQuery is called directly then there is an observer and it works fine but for queries that I call in deeper parts of my application the fetch fails and the state of the query is then in error state. This led to a bug somewhere in our app because we checked the isError boolean and displayed an error state if it was true. I wanted to know if this was the expected behavior and what would be the recommended way for dealing with that? For now we have updated our logic to display the error state only when there is an error and the data is not defined but I'm not sure it's the best solution. What bothers me the most is that it's a very easy mistake to make and it took us a while to figure out what was happening. What's your recommendation?

[TkDodo]

During hydration react-query tries to refetch them.

Not sure where exactly this is happening, but it shouldn't refetch during hydration. All it should do is put the queries into the cache... Yes, they have no queryFn, but that shouldn't matter, unless you explicitly refetch inactive queries with something like queryClient.refetchQueries

[pierrezimmermannbam]

Oh you're right we do call queryClient.refetchQueries whenever we retrieved internet connection so that was triggered when the app started. Not sure why it's done like that, I don't think it's needed so I'll remove that and it will fix our issue, thanks!

[TkDodo]

note that if you use queryClient.invalidateQueries instead, you shouldn't see that problem because it doesn't refetch inactive queries.