QueryOptions for cross-framework library

[jamestalmage]

I see what looks like nearly duplicate code in react-query, lit-query, vue-query for their queryOptions method definitions. Not precisely the same, but darn close.

If I'm developing a library using tanstack-query to fetch data from my service, is there a pattern to conveniently produce my own @mylib/query-core implementation that produces options objects that include queryKey and queryFn that makes it easy to then produce @mylib/query-react and @mylib/query-vue, etc. Seems like that's a potential benefit of the pattern (if not the outright goal). Is there a library doing this effectively/efficiently that I should take a look at?

[harshagarwalnyu]

The pattern you're looking for is to build your library on top of @tanstack/query-core directly. The queryOptions() function in each framework adapter (react-query, vue-query, etc.) is essentially just a type-narrowing identity function — the actual QueryOptions type lives in @tanstack/query-core. So your library can export factory functions that return QueryOptions and they'll work across all adapters without any framework-specific code.

Pattern:

// @mylib/query-core  (depends only on @tanstack/query-core)
import type { QueryOptions } from '@tanstack/query-core'

export const userQueryOptions = (userId: string): QueryOptions => ({
  queryKey: ['users', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 1000 * 60 * 5,
})

Then in consuming apps, no adapter shim needed:

// React app
import { useQuery } from '@tanstack/react-query'
import { userQueryOptions } from '@mylib/query-core'

const { data } = useQuery(userQueryOptions(userId))

// Vue app
import { useQuery } from '@tanstack/vue-query'
import { userQueryOptions } from '@mylib/query-core'

const { data } = useQuery(userQueryOptions(userId))

If you want queryOptions() for its TypeScript inference benefits (it infers TData from the queryFn return type), import it directly from @tanstack/query-core:

import { queryOptions } from '@tanstack/query-core'

export const userQueryOptions = (userId: string) =>
  queryOptions({
    queryKey: ['users', userId],
    queryFn: () => fetchUser(userId),
  })

This gives you full type inference and the resulting object is accepted by all framework adapters since they all share the same underlying type. You don't need separate @mylib/query-react / @mylib/query-vue packages unless you're exporting framework-specific hooks (not just options objects).