Composing queries with queryOptions
There is a
queryOptions function that accept the same props as useQuery etc. This would allow defining my queryKey and queryFn properties independent of usage while still resolve the correct types.
https://tanstack.com/query/latest/docs/framework/vue/guides/query-options
I want to be able to compose multiple pieces together easily but I'm having a lot of type issues.
I'm wondering if anyone has been able to get a similar approach to work or if there are some other types I can use that don't require me having to define all the types by hand.
A rough example might be something like the following:
``
// Returns result of queryOptions` with correctly inferred types
const vendorQueryOptions = (id: MaybeRef<number | undefined>): UseQueryOptions => {
return queryOptions({
queryKey: ['vendors', id],
queryFn: () => {
const primitiveId = unref(id)
if (!primitiveId) throw Error('Missing id')
return api.getVendorById(primitiveId)
},
})
}
const testId = ref(1)
// Valid: can use queryOptions output directly
const q = useQuery({
...vendorQueryOptions(testId)
})
// Valid: can use queryOptions output directly with plain objects
const q = useQuery({
...vendorQueryOptions(testId),
...{enabled: computed(() => !!testId.value)},
})
// Invalid: can't use queryOptions output more than once (I assume inferred types conflict)
const q = useQuery({
...vendorQueryOptions(testId),
...queryOptions({enabled: computed(() => !!testId.value)}),
})
// Invalid: can't use object typed with UseQueryOptions (I assume inferred types conflict)
const someOptions: UseQueryOptions = {enabled: computed(() => !!testId.value)}
const q = useQuery({
...vendorQueryOptions(testId),
...someOptions,
})Query Options | TanStack Query Docs
One of the best ways to share queryKey and queryFn between multiple places, yet keep them co-located to one another, is to use the queryOptions helper. At runtime, this helper just returns whatever you pass into it, but it has a lot of advantages when using it with TypeScript. You can define all possible options for a query in one place, and yo...
4 Replies
flat-fuchsia•2y ago
TS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
flat-fuchsia•2y ago
not sure how to solve case for q3, but composing it as in examples q4 and q5 should totally work
flat-fuchsia•2y ago
the solution is to remove
UseQueryOptions hints and let TS fully infer it. https://tkdodo.eu/blog/react-query-and-type-script#type-inferenceReact Query and TypeScript
Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety.
stormy-goldOP•2y ago
yea i'm thinking i'll just need to do this, I suppose the goal was to write a bunch of composable utility functions for common use cases and just mix them together but ensure they're typed correctly. Ideally being able to type the function return explicitly as "useQuery compatible" would make it easier to fix if apis change etc. rather than getting a bunch of useQueries fail all over the codebase and having to work backwards through complex type errors to figure out that a composable is no longer compatible.
Not the end of the world I guess but wanted to check if I was missing something. Thanks for helping.