feat(hydration): dehydrate.serialize and hydrate.deserialize

[juliusmarminge]

Note

Given that the feature is brand new and there were likely not many people using it, combined with it not really working to begin with, we have decided to make a breaking change and replace transformPromise with serialize/deserialize.

When a query gets resolved on the server before we dehydrate, the dehydrated query will contain the serialized data, but the transformPromise function will never run to deserialize it, leading to serialized data being put in the query cache:

You can simulate the failing behavior like this:

// page.tsx
export default async function Home() {
  const queryClient = makeQueryClient()

  void queryClient.prefetchQuery({
    queryKey: ['data'],
    queryFn: async () => {
      await sleep(1)
      return tson.serialize({
        text: 'data from server',
        date: Temporal.PlainDate.from('2024-01-01'),
      })
    },
  })

  await sleep(10)

  // by now the prefetched query will have resolved, so the dehydratedState
  // will contain the serialized data, not the promise
  const dehydratedState = dehydrate(queryClient)
  console.log('dehydratedState', JSON.stringify(dehydratedState, null, 2))

  return (
    <main>
      <HydrationBoundary state={dehydratedState}>
        <ClientComponent />
      </HydrationBoundary>
    </main>
  )
}

To solve this, I've (as discussed) replaced the transformPromise option with transformData and added the transformation step to the other necessary places as well

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jun 28, 2024 8:05pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit eb19eab. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit eb19eab:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[codecov]

Codecov Report

Attention: Patch coverage is 93.75000% with 1 line in your changes missing coverage. Please review.

Project coverage is 62.47%. Comparing base (87c8e01) to head (eb19eab).

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #7615       +/-   ##
===========================================
+ Coverage   43.98%   62.47%   +18.49%     
===========================================
  Files         185      125       -60     
  Lines        7043     4504     -2539     
  Branches     1544     1248      -296     
===========================================
- Hits         3098     2814      -284     
+ Misses       3579     1459     -2120     
+ Partials      366      231      -135     

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	86.58% <ø> (ø)
@tanstack/eslint-plugin-query	∅ <ø> (∅)
@tanstack/query-async-storage-persister	43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	∅ <ø> (∅)
@tanstack/query-core	92.86% <93.75%> (+0.10%)	⬆️
@tanstack/query-devtools	5.24% <ø> (ø)
@tanstack/query-persist-client-core	57.73% <ø> (ø)
@tanstack/query-sync-storage-persister	82.50% <ø> (ø)
@tanstack/react-query	92.93% <ø> (ø)
@tanstack/react-query-devtools	10.71% <ø> (ø)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	100.00% <ø> (ø)
@tanstack/solid-query	78.06% <ø> (ø)
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	100.00% <ø> (ø)
@tanstack/svelte-query	68.66% <ø> (ø)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	100.00% <ø> (ø)
@tanstack/vue-query	70.60% <ø> (ø)
@tanstack/vue-query-devtools	∅ <ø> (∅)