Closed utterances-bot closed 2 years ago
Great post as always! 👍 Your articles help me a lot, thanks for it!
I may be wrong, but it seems to me that I found typos in the examples.
In all examples
... fetchTodo(...)
should be replaced (?) with:
... fetchTodos(...)
and in the Object Query Keys
example:
const todoKeys = {
// ✅ all keys are arrays with exactly one object
all: [{ scope: 'todos' }] as const,
lists: () => ({ ...todoKeys.all[0], entity: 'list' } as const),
list: (state: State, sorting: Sorting) =>
({ ...todoKeys.lists()[0], state, sorting } as const),
}
missing extra square brackets for the lists
key:
const todoKeys = {
// ✅ all keys are arrays with exactly one object
all: [{ scope: 'todos' }] as const,
lists: () => ([{ ...todoKeys.all[0], entity: 'list' }] as const),
list: (state: State, sorting: Sorting) =>
({ ...todoKeys.lists()[0], state, sorting } as const),
}
And if I understand correctly the list
also must be described as an array with only one object element.
const todoKeys = {
...
...
list: (state: State, sorting: Sorting) =>
([{ ...todoKeys.lists(), state, sorting }] as const),
}
I thought query key arrays must begin with strings, is that rule obsolete?
@rchubatov you are of course right on both accounts. I guess I was rushing the publishing a bit this time 😅. If you want, I’d accept a PR to fix it (https://github.com/tkdodo/blog), otherwise I’ll do it later 😊
@joshwilsonvu the query key must be a string or an array. There is no restriction of what can go in the array. The type is defined here: https://github.com/tannerlinsley/react-query/blob/4d762a4ffe16ea126c432460699f04bf73463f23/src/core/types.ts#L6
Cool!
wow awesome
This is amazing
Awesome work! Loving the blog, I'm just getting started with react-query
and this has been great for finding some baseline best practices.
I don't know if this will help anyone but I created a small utility to help type the context:
type QueryContext<
keys extends { [K: string]: QueryKey | ((...params: any[]) => QueryKey) },
mode extends keyof keys
> = keys[mode] extends (...params: any[]) => QueryKey
? QueryFunctionContext<ReturnType<keys[mode]>>
: keys[mode] extends QueryKey
? QueryFunctionContext<keys[mode]>
: never;
// Can then be used like this:
const fetchTodos = async ({ queryKey: [{ state, sorting }] }: QueryContext<typeof todoKeys, "list">) => {
...
}
Feels like entity
and scope
should be reversed? "Todo" is an "Entity" and "List" is a scope?
@Faithfinder yes, possibly. It's just an example 😅
Leveraging the Query Function Context | TkDodo's blog
Use what React Query provides for optimal type safety
https://tkdodo.eu/blog/leveraging-the-query-function-context