Idea: hydrate react-query cache more automagically

[KATT]

The way we hydrate the react-query cache on the client is a bit convoluted and unnecessarily complex DX.

I think I could make mine a bit easier to deal with so it's more generic instead:

• In RSC, create a real queryClient from react-query & populate it's cache when calling stuff
• Pass queryClientData={hydrate(queryClient}} to the Client component
• Have a generic HOC on client components that expects a queryClientData & uses setQueryData

API on the server (here) could look something like:

Not that nice with HOC

// page.tsx
function PostListRSC() {
  const postList = rscClient.post.list.fetch({});

  return (
    <PostList
      queryClientData={rscClient.hydrate()}
    />
  );
}

Or, if the HOC was a render-prop thing, maybe this could work:

// page.tsx
function PostListRSC() {
  const postList = rscClient.post.list.fetch({});

  return (
    <Hydrated
      queryClient={rscClient.hydrate()}
      Component={PostList}
    />
  );
}

Then, the client could "just work" in a pre-hydrated way where we wouldn't need to pass initialData.

Overview of how to do it

• Create a new recursive proxy like the one we have in /@trpc
• Create new QueryClient() and populate it as we're calling (similar to our utils.*.fetch()

---

• Don't take the API design above as absolute truth, it's probable that it will have to be slightly different
• One important caveat is that we need to make sure this queryClient isn't used across multiple clients' requests.