feat: hydrate jotai-tanstack-query queryClientAtom and TanStack/Query queryClient

Author: ThaddeusJiang

examples/11_nextjs_app_router/package.json

@@ -9,6 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.10",
+    "jotai": "^2.15.1",
+    "jotai-tanstack-query": "workspace:*",
     "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0"

examples/11_nextjs_app_router/src/app/posts/[postId]/_components/post.tsx

@@ -1,14 +1,17 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query'
-import { getPost } from '../page'
 import Link from 'next/link'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { postIdAtom, postQueryAtom } from '../../../stores'
+import { useEffect } from 'react'
 
 export const Post = ({ postId }: { postId: string }) => {
-  const { data, isPending, isError } = useQuery({
-    queryKey: ['posts', postId],
-    queryFn: ({ queryKey: [, postId] }) => getPost(postId as string),
-  })
+  const setPostIdValue = useSetAtom(postIdAtom)
+  useEffect(() => {
+    setPostIdValue(postId)
+  }, [postId, setPostIdValue])
+
+  const { data, isPending, isError, refetch } = useAtomValue(postQueryAtom)
   if (isPending) return <div>Loading...</div>
   if (isError) return <div>Error</div>
   return (
@@ -18,8 +21,16 @@ export const Post = ({ postId }: { postId: string }) => {
       <h1>Title: {data?.title}</h1>
       <div>Body: {data?.body}</div>
 
-      <div>
-        <Link href={`/posts/${Number(postId) + 1}`}>Next post</Link>
+      <div style={{ marginTop: '1rem' }}>
+        <button onClick={() => refetch()}>
+          Refetch post - only client-side
+        </button>
+      </div>
+
+      <div style={{ marginTop: '1rem' }}>
+        <Link href={`/posts/${Number(postId) + 1}`}>
+          Next post - only server-side
+        </Link>
       </div>
     </div>
   )

examples/11_nextjs_app_router/src/app/posts/page.tsx

@@ -4,16 +4,27 @@ export default function PostsPage() {
   return (
     <div>
       Posts
-      <Link href="/posts/1">Post 1</Link>
-      <Link href="/posts/2">Post 2</Link>
-      <Link href="/posts/3">Post 3</Link>
-      <Link href="/posts/4">Post 4</Link>
-      <Link href="/posts/5">Post 5</Link>
-      <Link href="/posts/6">Post 6</Link>
-      <Link href="/posts/7">Post 7</Link>
-      <Link href="/posts/8">Post 8</Link>
-      <Link href="/posts/9">Post 9</Link>
-      <Link href="/posts/10">Post 10</Link>
+      <div>
+        <Link href="/posts/1">Post 1</Link>
+        <br />
+        <Link href="/posts/2">Post 2</Link>
+        <br />
+        <Link href="/posts/3">Post 3</Link>
+        <br />
+        <Link href="/posts/4">Post 4</Link>
+        <br />
+        <Link href="/posts/5">Post 5</Link>
+        <br />
+        <Link href="/posts/6">Post 6</Link>
+        <br />
+        <Link href="/posts/7">Post 7</Link>
+        <br />
+        <Link href="/posts/8">Post 8</Link>
+        <br />
+        <Link href="/posts/9">Post 9</Link>
+        <br />
+        <Link href="/posts/10">Post 10</Link>
+      </div>
     </div>
   )
 }

examples/11_nextjs_app_router/src/app/providers.tsx

@@ -6,8 +6,16 @@ import {
   isServer,
   QueryClient,
   QueryClientProvider,
+  QueryClientProviderProps,
 } from '@tanstack/react-query'
+import { Provider } from 'jotai/react'
+import { useHydrateAtoms } from 'jotai/react/utils'
+import { queryClientAtom } from 'jotai-tanstack-query'
 
+const HydrateAtoms = ({ client, children }: QueryClientProviderProps) => {
+  useHydrateAtoms(new Map([[queryClientAtom, client]]))
+  return children
+}
 function makeQueryClient() {
   return new QueryClient({
     defaultOptions: {
@@ -44,6 +52,10 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   const queryClient = getQueryClient()
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <Provider>
+        <HydrateAtoms client={queryClient}>{children}</HydrateAtoms>
+      </Provider>
+    </QueryClientProvider>
   )
 }

examples/11_nextjs_app_router/src/app/stores.ts

@@ -0,0 +1,12 @@
+import { atom } from 'jotai'
+import { getPost } from './posts/[postId]/page'
+import { atomWithQuery } from 'jotai-tanstack-query'
+
+export const postIdAtom = atom<string>('1')
+export const postQueryAtom = atomWithQuery((get) => ({
+  queryKey: ['posts', get(postIdAtom)],
+  queryFn: ({ queryKey: [, postId] }) => getPost(postId as string),
+  staleTime: Infinity,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+}))