TanStack•12mo ago•

33 replies

skinny-azure

ensure vs prefetch query in deferred data loading

I'm trying to understand the difference between

ensureQueryData

ensureQueryData

and

prefetchQueryData

prefetchQueryData

, esepcially in the context of deferred loading.

From the tanstack router docs:

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

Then in the component:

function PostIdComponent() {
  const slowData = useSuspenseQuery(slowDataOptions())
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

function PostIdComponent() {
  const slowData = useSuspenseQuery(slowDataOptions())
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

I get why we don't

await

await

the prefetch query, since we want to let it resolve in a

<Suspense />

<Suspense />

block.

But from the docs it seems like the main diff. between the two is that

prefetch

prefetch

will never throw, and

ensureQueryData

ensureQueryData

will prefer to serve cached data.

But for instance, why can't both use

prefetch

prefetch

or both use

ensure

ensure

TanStack•12mo ago•

33 replies

skinny-azure

ensure vs prefetch query in deferred data loading

I'm trying to understand the difference between

ensureQueryData

ensureQueryData

and

prefetchQueryData

prefetchQueryData

, esepcially in the context of deferred loading.

From the tanstack router docs:

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ context: { queryClient } }) => {
    // Kick off the fetching of some slower data, but do not await it
    queryClient.prefetchQuery(slowDataOptions())

    // Fetch and await some data that resolves quickly
    await queryClient.ensureQueryData(fastDataOptions())
  },
})

Then in the component:

function PostIdComponent() {
  const slowData = useSuspenseQuery(slowDataOptions())
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

function PostIdComponent() {
  const slowData = useSuspenseQuery(slowDataOptions())
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowDataComponent />
    </Suspense>
  )
}

I get why we don't

await

await

the prefetch query, since we want to let it resolve in a

<Suspense />

<Suspense />

block.

But from the docs it seems like the main diff. between the two is that

prefetch

prefetch

will never throw, and

ensureQueryData

ensureQueryData

will prefer to serve cached data.

But for instance, why can't both use

prefetch

prefetch

or both use

ensure

ensure

ensure vs prefetch query in deferred data loading

Similar Threads

ensure vs prefetch query in deferred data loading

Similar Threads

Similar Threads

Similar Threads