TanStackT
TanStack•3mo ago•
1 reply
few-sapphire

"on-demand" live query returns empty data on remount.

I’m testing the new query-driven sync. First load works great, but if I navigate away and back, the query returns [] and queryFn isn’t called again.

Is this something wrong with my implementation, or a bug with on-demand + navigation?

I’m trying to emulate the blog post and have a collection like this:

export const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: (opts?: LoadSubsetOptions) => buildQueryKey('todos', opts),
    queryFn: async (ctx) => {
      const params = parseLoadSubsetOptions(
        ctx.meta?.loadSubsetOptions ?? undefined,
      )

      console.log({ params })

      return Promise.resolve([
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
      ])
    },
    syncMode: 'on-demand',
    queryClient,

    getKey: (item) => item.id,
  }),
)

function buildQueryKey(base: string, opts?: LoadSubsetOptions) {
  return [
    base,
    opts?.where ?? null,
    opts?.orderBy ?? null,
    opts?.limit ?? null,
  ] as const
}


In my component, I am using it like this:

function TanStackQueryDemo() {
  const { data: dataOnDemand = [] } = useLiveQuery((q) =>
    q.from({ todo: todoCollection }).where(({ todo }) => eq(todo.id, 1)),
  )

  return (


@tanstack/query-db-collection: 1.0.0,
@tanstack/react-db: 0.1.44,
Was this page helpful?