T
TanStack•3y ago
eastern-cyan

Is there a working example of how to properly use in Nuxt/SSR?

I've set this up in Nuxt 3, like so: 
const {
  data,
  fetchNextPage,
  isFetchingNextPage,
  hasNextPage,
  suspense,
  isLoading,
} = useInfiniteQuery({
  suspense: true,
  queryKey: ['items'],
  queryFn: async () => {
    return await getItems(...)

  },
})

await onServerPrefetch(async () => await suspense())

console.log('data: ', data.value)
const {
  data,
  fetchNextPage,
  isFetchingNextPage,
  hasNextPage,
  suspense,
  isLoading,
} = useInfiniteQuery({
  suspense: true,
  queryKey: ['items'],
  queryFn: async () => {
    return await getItems(...)

  },
})

await onServerPrefetch(async () => await suspense())

console.log('data: ', data.value)
In the above, data is undefined on the server, but its populated on the client. This causes hydration issues in nuxt. Am I using onServerPrefetch incorrectly here, or is suspense used incorrectly?
1 Reply
rare-sapphire
rare-sapphire•15mo ago
Did you manage to resolve the issue ?

Did you find this page helpful?