Comments (12)
This is amazing
from blog-comments.
wow awesome
from blog-comments.
@rchubatov you are of course right on both accounts. I guess I was rushing the publishing a bit this time
from blog-comments.
from blog-comments.
Cool!
from blog-comments.
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">) => {
...
}
from blog-comments.
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),
}
from blog-comments.
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),
}
from blog-comments.
I thought query key arrays must begin with strings, is that rule obsolete?
from blog-comments.
@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
from blog-comments.
Feels like entity
and scope
should be reversed? "Todo" is an "Entity" and "List" is a scope?
from blog-comments.
@Faithfinder yes, possibly. It's just an example
from blog-comments.
Related Issues (20)
- blog/testing-react-query HOT 65
- blog/react-query-and-type-script HOT 25
- blog/using-web-sockets-with-react-query HOT 5
- blog/effective-react-query-keys HOT 28
- blog/about-async-functions HOT 5
- blog/placeholder-and-initial-data-in-react-query HOT 1
- blog/react-query-as-a-state-manager HOT 24
- blog/react-query-error-handling HOT 39
- blog/use-state-vs-use-reducer HOT 5
- blog/mastering-mutations-in-react-query HOT 43
- blog/beware-the-leaking-any
- blog/2021-in-review HOT 7
- blog/road-to-refactoring HOT 1
- blog/always-provide-customer-value
- blog/offline-react-query HOT 1
- blog/optional-vs-undefined HOT 1
- blog/use-urgency
- blog/react-query-and-forms HOT 16
- blog/react-query-and-forms HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog-comments.