Query refetching using hydration for Next 13 experimental app

I'm trying to follow the docs on prefetching data using the new experimental next 13 app directory. However I find it hard to understand how prefetching actually works

Server component:

export default async function HydratedPosts() {
  const queryClient = getQueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)
  const dehydratedState = dehydrate(queryClient)

  return (
    <Hydrate state={dehydratedState}>
      <Posts />
    </Hydrate>
  )
}

export default async function HydratedPosts() {
  const queryClient = getQueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)
  const dehydratedState = dehydrate(queryClient)

  return (
    <Hydrate state={dehydratedState}>
      <Posts />
    </Hydrate>
  )
}

Cache is initialized by

prefetchQuery()

prefetchQuery()

. Client component is then dehydrated and rehydrated based on the cache.

Client component:

export default function Posts() {
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
  //...
}

export default function Posts() {
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
  //...
}

We retrieve the data that was previously prefetched/cached in server.

Question:
1. When does this dehydration/rehydration get triggered? Is it whenever the data(in this case 'posts') get invalidated?
2. In docs it says

Query refetching is based on when the query was prefetched on the server

Query refetching is based on when the query was prefetched on the server

. Does this mean, query refetching (client component) happens whenever prefetching (server component) happens? Then, how would we trigger server prefetching that would trigger refetching? In my mind, it's

cache invalidated -> prefetch at server -> refetch at client

cache invalidated -> prefetch at server -> refetch at client

. Is this correct on how I understand what doc meant by query refetching? Because it didn't quite feel right to say that server is prefetching multiple times.
3. What is this dehydration/rehydration actually about? As far as I understand, it's about detaching/attaching event listeners on the client's DOM that has been pre-rendered and served to browser from the server. Also, in terms of react query, hydrating query is about being able to use React Query's full capability on the query. So, initially before hydration, prefetched data do not have much capacity to do things like refetching the query, but after hydration happens in client, we can now refetch the query?

TanStack•3y ago•

2 replies

efficient-indigo

Query refetching using hydration for Next 13 experimental app

I'm trying to follow the docs on prefetching data using the new experimental next 13 app directory. However I find it hard to understand how prefetching actually works

Server component:

export default async function HydratedPosts() {
  const queryClient = getQueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)
  const dehydratedState = dehydrate(queryClient)

  return (
    <Hydrate state={dehydratedState}>
      <Posts />
    </Hydrate>
  )
}

export default async function HydratedPosts() {
  const queryClient = getQueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)
  const dehydratedState = dehydrate(queryClient)

  return (
    <Hydrate state={dehydratedState}>
      <Posts />
    </Hydrate>
  )
}

Cache is initialized by

prefetchQuery()

prefetchQuery()

. Client component is then dehydrated and rehydrated based on the cache.

Client component:

export default function Posts() {
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
  //...
}

export default function Posts() {
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
  //...
}

Query refetching is based on when the query was prefetched on the server

Query refetching is based on when the query was prefetched on the server

cache invalidated -> prefetch at server -> refetch at client

cache invalidated -> prefetch at server -> refetch at client

Query refetching using hydration for Next 13 experimental app

Similar Threads

Query refetching using hydration for Next 13 experimental app

Similar Threads

Similar Threads

Similar Threads