Skip to content

[vue-db] useLiveQuery returns array type for data even when using findOne() #1095

@sergeyd108

Description

@sergeyd108
  • I've validated the bug against the latest version of DB packages

Describe the bug

When using useLiveQuery from @tanstack/vue-db with .findOne(), the data property always returns an array (T[]) instead of a single object (T | undefined). This behavior differs from @tanstack/react-db, where findOne() correctly returns a single object.

The UseLiveQueryReturn interface in Vue adapter has data hardcoded as ComputedRef<T[]>, which ignores the .findOne() modifier.

To Reproduce

  1. Create a Vue component using @tanstack/vue-db
  2. Use useLiveQuery with .findOne() to fetch a single record:
import { useLiveQuery } from '@tanstack/vue-db'
import { eq } from '@tanstack/db'

const { data } = useLiveQuery((q) =>
  q.from({ users: usersCollection })
   .where(({ users }) => eq(users.id, 'some-id'))
   .findOne()
)
  1. Log or inspect data.value
  2. See that it returns an array [{ id: '...', ... }] instead of a single object { id: '...', ... }

Expected behavior

When using .findOne(), the data property should return T | undefined (a single object or undefined), not T[] (an array). This is how it works in @tanstack/react-db:

// React - works correctly
const { data } = useLiveQuery((q) =>
  q.from({ users: usersCollection })
   .where(({ users }) => eq(users.id, userId))
   .findOne()
)
// data type: User | undefined ✓

Screenshots

N/A

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Chrome
  • Version: latest

Smartphone (please complete the following information):

N/A (not mobile-specific)

Additional context

Package versions:

  • @tanstack/db: 0.5.16
  • @tanstack/vue-db: 0.0.92
  • vue: 3.5.26

Current workaround:

const query = useLiveQuery((q) =>
  q.from({ users: usersCollection })
   .where(({ users }) => eq(users.id, userId))
   .findOne()
)

// Manually extract first element
const user = computed(() => query.data.value?.[0])

The issue appears to be in the UseLiveQueryReturn interface definition which doesn't account for the findOne() query modifier:

interface UseLiveQueryReturn<T extends object> {
  data: ComputedRef<T[]>;  // Always array, should be conditional based on findOne()
  // ...
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions