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?

[aymenhmaidiwastaken]

Build your library on top of @tanstack/query-core directly. The queryOptions() in each framework adapter is essentially a typed identity function — it doesn't do anything at runtime, it just provides type inference for the specific framework's hooks.

For a cross-framework library, define your query options using core types:

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

// Your library exports
export const userQueries = {
  all: () => queryOptions({
    queryKey: ['users'],
    queryFn: () => fetchUsers(),
  }),
  detail: (id: string) => queryOptions({
    queryKey: ['users', id],
    queryFn: () => fetchUser(id),
  }),
};

Then consumers use them with their framework's hooks:

// React consumer
import { useQuery } from '@tanstack/react-query';
import { userQueries } from 'your-library';

const { data } = useQuery(userQueries.detail('123'));

// Vue consumer
import { useQuery } from '@tanstack/vue-query';
import { userQueries } from 'your-library';

const { data } = useQuery(userQueries.detail('123'));

The queryOptions from @tanstack/query-core produces an object that is compatible with all framework adapters. The framework-specific queryOptions() functions mainly exist to add framework-specific type narrowing (e.g., Vue's Ref unwrapping), but for a library that just defines query keys and functions, the core version works across all frameworks.