Stale data loading with ensureQueryData and useSuspenseQuery

in the docs there is this example about data loading

const postsQueryOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: () => fetchPosts(),
})

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})

const postsQueryOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: () => fetchPosts(),
})

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})

I have a scenario where i go to this page, so the data is loaded, i go to a different page and call a mutation which invalidates

postsQueryOptions

postsQueryOptions

. When i go back to the first page the data is not fetched again since ensureQueryData doesn't care about stale data.

What is the preferred way of handling this? There is an parameter

revalidateIfStale

revalidateIfStale

from ensureQueryData (Which i made the PR for) but wouldn't that throw an error on the useSuspenseQuery if that api for some reason throws an error?

TanStack•16mo ago•

2 replies

slow-yellow

Stale data loading with ensureQueryData and useSuspenseQuery

in the docs there is this example about data loading

const postsQueryOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: () => fetchPosts(),
})

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})

const postsQueryOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: () => fetchPosts(),
})

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})

I have a scenario where i go to this page, so the data is loaded, i go to a different page and call a mutation which invalidates

postsQueryOptions

postsQueryOptions

. When i go back to the first page the data is not fetched again since ensureQueryData doesn't care about stale data.

What is the preferred way of handling this? There is an parameter

revalidateIfStale

revalidateIfStale

from ensureQueryData (Which i made the PR for) but wouldn't that throw an error on the useSuspenseQuery if that api for some reason throws an error?

Stale data loading with ensureQueryData and useSuspenseQuery

Similar Threads

Stale data loading with ensureQueryData and useSuspenseQuery

Similar Threads

Similar Threads

Similar Threads