feat: add equality fn to atomWithQuery #386
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 965db9b:
|
|
As we discussed in discord, I'm not a big fan of equalityFn. But, this sounds unavoidable.
As this means, react-query returns an different object with the same content. |
src/query/atomWithQuery.ts
Outdated
| const data = get(dataAtom) | ||
| if (!data || !equalityFn(data, action.data)) { | ||
| set(dataAtom, action.data) | ||
| } | ||
| const pending = get(pendingAtom) | ||
| if (!pending.fulfilled) { | ||
| pending.resolve(action.data) |
There was a problem hiding this comment.
It's probably better to keep the pair of dataAtom and pendingAtom in sync.
| const data = get(dataAtom) | |
| if (!data || !equalityFn(data, action.data)) { | |
| set(dataAtom, action.data) | |
| } | |
| const pending = get(pendingAtom) | |
| if (!pending.fulfilled) { | |
| pending.resolve(action.data) | |
| const data = get(dataAtom) | |
| if (!data || !equalityFn(data, action.data)) { | |
| set(dataAtom, action.data) | |
| const pending = get(pendingAtom) | |
| if (!pending.fulfilled) { | |
| pending.resolve(action.data) | |
| } |
src/query/atomWithQuery.ts
Outdated
| @@ -60,7 +61,10 @@ export function atomWithQuery< | |||
| } | |||
| action.initializer(getQueryClient(get, set)) | |||
| } else if (action.type === 'data') { | |||
| set(dataAtom, action.data) | |||
| const data = get(dataAtom) | |||
| if (!data || !equalityFn(data, action.data)) { | |||
There was a problem hiding this comment.
| if (!data || !equalityFn(data, action.data)) { | |
| if (data === null || !equalityFn(data, action.data)) { |
Let's make it strict here. (tbh, i'm not certain if null in L37 is valid to mean uninitialized. Can TData ever be null?)
|
@Aslemammad thoughts? |
Yeah, I think it does. I know they have this feature: |
|
Merging this now. |
This takes the same
equalityFnsignature fromselectAtomand adds it to theatomWithQueryhelper. I have found this very helpful in my apps to help control rerenders while the query revalidates. Currently, if the query is set to refetch on an interval, when it sets the data atom again it will cause any component that uses the data to rerender even if nothing in the data has changed.Happy to explore other options, but this works for me currently.