react-location, react-query, observer and invalidation

[GLabat]

Hi. First of all, thanks for providing us with such good libraries!

We are in the process of integrating both react-query and react-location in our product.
And several questions arise.
One them is about the invalidation of a query from react-query inside a react-location loader.
I could setup a sandbox if needed but please allow me to briefly describe the use-case.

• "posts" is a route defined as:

path: "posts",
children: [
  path: '/',
  loader: async () => {
    return {
      posts: await getPosts(queryClient)
    };
  },
  element: <PostList />

• the getPosts method uses queryClient.fetchQuery(postsQuery) to retrieve a list of posts
• The PostList element uses

const {
    data: { posts }
  } = useMatch();

to retrieve the posts from the loader.

With this configuration, all works fine … but here comes the question:

It seems that when the PostList is displayed, nothing is observing the postsQuery query in the cache.
This seems legit since the PostList uses posts coming from the route loader.
The problem is that if an invalidation of the postsQuery comes (for ex from a websocket), then the PostList does not get refreshed.

As a workaround, we replaced the useSearch with a usePosts hook which uses useQuery(postsQuery) and thus make PostList an observer of the query, which then gets refreshed on query invalidation.
This "seems" ok since with both implementations, the query cache is used.

But it would be great to have your feedback on this. Is there something we missed? Should react-location "loader/route element" be somehow an observer of a query when react-query is used?

Thanks.

[tannerlinsley]

Instead of using React Location as the source of truth, keep fetching and using your data from React Query and merely use React Location's loaders to queryClient.prefetchQuery(...) instead. This way, routing will still suspend as you would expect it to, but you can continue to use RQ. See the React Query example in this repo for more info.

[GLabat]

Hi, thanks Tanner for the feedback 👍. This confirms our thoughts.