Why would I want to use getQueryData() in the route loader as shown in react-query example?

[cvaldev]

First of all, thank you so much for these amazing libraries!

I'm a bit confused about the react-query example, and I think I may be missing the point of using react-query in the loader like this:

loader: () =>
              queryClient.getQueryData("posts") ??
              queryClient.fetchQuery("posts", fetchPosts).then(() => ({})),

This ends up in these cases:

1. cache is empty -> invoke fetchQuery -> useQuery hook will return fresh data
2. cache is not empty and fresh -> invoke getQueryData -> useQuery hook returns fresh data
3. cache is not empty but is stale -> invoke getQueryData -> useQuery hook refetches

In my head, if I'm going to integrate react-query in the loader it'd be to pre-fetch the data and then I'd call useQuery() inside my component to access the fresh data. However, using getQueryData results in a case(3) where there is stale data that should be getting re-fetched but instead of doing so in the loader it gets done in the component by useQuery, why would I want to do that?

Wouldn't it be preferred to pre-fetch in the loader whether the cache is empty or stale? like this:

1. Stays the same
2. cache is not empty and fresh -> invoke fetchQuery-> useQuery hook returns fresh data
3. cache is not empty but is stale -> invoke fetchQuery, it refetches -> useQuery hook will return fresh data

I feel like I'm completely missing the point of getQueryData() in the loader, and I may be missing a key piece of information to understand the motivation behind using it the way it's shown in the example.