preloading + persist plugin

Hi guys
I’ve been exploring TanStack Start and ran into an issue when trying to use the tanstack query persist plugin.

When I use

useQuery

useQuery

like this, it works as expected — the query is persisted, and if the data already exists, it doesn’t re-fetch from the API.

export const useListOrgs = () =>
  useQuery({
    queryKey: ['users'],
    queryFn: listUsers,
    staleTime: Number.POSITIVE_INFINITY,
  })

export const useListOrgs = () =>
  useQuery({
    queryKey: ['users'],
    queryFn: listUsers,
    staleTime: Number.POSITIVE_INFINITY,
  })

but If I try to preload the query using

ensureQueryData

ensureQueryData

, it always calls the API again regardless, ignoring the persisted data on the client.

beforeLoad: ({ context }) => {
// this always calls the api again
    context.queryClient.ensureQueryData({
      queryKey: ['users'],
      queryFn: listUsers,
      staleTime: Number.POSITIVE_INFINITY,
    })
  },

beforeLoad: ({ context }) => {
// this always calls the api again
    context.queryClient.ensureQueryData({
      queryKey: ['users'],
      queryFn: listUsers,
      staleTime: Number.POSITIVE_INFINITY,
    })
  },

i expected it dosn't call the api again if the data already exists on client ? right ?

also

useSuspenseQuery

useSuspenseQuery

triggers an api call too .. ignoring the persisted data .. only

useQuery

useQuery

works fine without preloading

TanStack•7mo ago•

7 replies

safe-amethyst

preloading + persist plugin

Hi guys
I’ve been exploring TanStack Start and ran into an issue when trying to use the tanstack query persist plugin.

When I use

useQuery

useQuery

like this, it works as expected — the query is persisted, and if the data already exists, it doesn’t re-fetch from the API.

export const useListOrgs = () =>
  useQuery({
    queryKey: ['users'],
    queryFn: listUsers,
    staleTime: Number.POSITIVE_INFINITY,
  })

export const useListOrgs = () =>
  useQuery({
    queryKey: ['users'],
    queryFn: listUsers,
    staleTime: Number.POSITIVE_INFINITY,
  })

but If I try to preload the query using

ensureQueryData

ensureQueryData

, it always calls the API again regardless, ignoring the persisted data on the client.

beforeLoad: ({ context }) => {
// this always calls the api again
    context.queryClient.ensureQueryData({
      queryKey: ['users'],
      queryFn: listUsers,
      staleTime: Number.POSITIVE_INFINITY,
    })
  },

beforeLoad: ({ context }) => {
// this always calls the api again
    context.queryClient.ensureQueryData({
      queryKey: ['users'],
      queryFn: listUsers,
      staleTime: Number.POSITIVE_INFINITY,
    })
  },

i expected it dosn't call the api again if the data already exists on client ? right ?

also

useSuspenseQuery

useSuspenseQuery

triggers an api call too .. ignoring the persisted data .. only

useQuery

useQuery

works fine without preloading

preloading + persist plugin

Similar Threads

preloading + persist plugin

Similar Threads

Similar Threads

Similar Threads