feat(react): tanstack v4 for member management#299
Conversation
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #299 +/- ##
==========================================
- Coverage 89.59% 87.32% -2.27%
==========================================
Files 155 180 +25
Lines 13084 15523 +2439
Branches 1803 2116 +313
==========================================
+ Hits 11722 13555 +1833
- Misses 1362 1968 +606 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…t/tanstack-v4-for-member-management
| isRemovingFromOrg: removeFromOrgMutation.isPending ?? (removeFromOrgMutation as any).isLoading, | ||
| isAssigningRoles: assignRolesMutation.isPending ?? (assignRolesMutation as any).isLoading, | ||
| isRemovingRoles: removeRolesMutation.isPending ?? (removeRolesMutation as any).isLoading, | ||
| removingRoleIds: | ||
| (removeRolesMutation.isPending ?? (removeRolesMutation as any).isLoading) | ||
| ? removingRoles.map((r) => r.id) | ||
| : [], |
| const keepPreviousDataOption = | ||
| typeof keepPreviousData === 'function' | ||
| ? { placeholderData: keepPreviousData } | ||
| : ({ keepPreviousData: true } as object); | ||
|
|
There was a problem hiding this comment.
similar to make it more type safe
`import { keepPreviousData } from '@tanstack/react-query';
type KeepPreviousDataOptionV5 = { placeholderData: typeof keepPreviousData };
type KeepPreviousDataOptionV4 = { keepPreviousData: true };
type KeepPreviousDataOption = KeepPreviousDataOptionV5 | KeepPreviousDataOptionV4;
export function getKeepPreviousDataOption(): KeepPreviousDataOption {
// v5 exports keepPreviousData as a function
if (typeof keepPreviousData === 'function') {
return { placeholderData: keepPreviousData };
}
// v4 uses boolean option
return { keepPreviousData: true };
}`
- add isMutationPending and getKeepPreviousDataOption helpers - update member management hooks to use compat utilities - remove as any casts and direct keepPreviousData usage
| * In v5, `keepPreviousData` boolean option was replaced by `placeholderData: keepPreviousData`. | ||
| * @returns The appropriate option object to spread into a query config. | ||
| */ | ||
| export function getKeepPreviousDataOption(): KeepPreviousDataOption { |
There was a problem hiding this comment.
can we rename this to **getPreviousDataOption**
|
|
||
| type KeepPreviousDataOptionV5 = { placeholderData: typeof keepPreviousData }; | ||
| type KeepPreviousDataOptionV4 = { keepPreviousData: true }; | ||
| type KeepPreviousDataOption = KeepPreviousDataOptionV5 | KeepPreviousDataOptionV4; |
There was a problem hiding this comment.
rename this to PreviousDataOption
| } | ||
|
|
||
| type KeepPreviousDataOptionV5 = { placeholderData: typeof keepPreviousData }; | ||
| type KeepPreviousDataOptionV4 = { keepPreviousData: true }; |
There was a problem hiding this comment.
rename ** LegacyKeepPreviousOption**
| return mutation.isPending ?? mutation.isLoading ?? false; | ||
| } | ||
|
|
||
| type KeepPreviousDataOptionV5 = { placeholderData: typeof keepPreviousData }; |
There was a problem hiding this comment.
rename ** PlaceholderDataOption**
| import type { UseMutationResult } from '@tanstack/react-query'; | ||
| import { keepPreviousData } from '@tanstack/react-query'; | ||
|
|
||
| type MutationV4Compat = { isLoading?: boolean }; |
There was a problem hiding this comment.
I took a look and seems its not needed
| export function isMutationPending< | ||
| T extends Pick<UseMutationResult, 'isPending'> & MutationV4Compat, | ||
| >(mutation: T): boolean { | ||
| return mutation.isPending ?? mutation.isLoading ?? false; | ||
| } |
There was a problem hiding this comment.
please update this as
`
export function isMutationLoading<
T extends Pick<UseMutationResult, 'isPending'> & { isLoading?: boolean },
(mutation: T): boolean {
return mutation.isPending ?? mutation.isLoading ?? false;
}
`
3 participants
Summary
Adds support for Tanstack v4
Why
What
Packages
packages/corepackages/reactexamplesReferences
Testing
How can this be verified? Note anything intentionally not covered by tests and why.
Checklist
Contributing