feat(react): support react-query v4 alongside v5#300
Conversation
- move @tanstack/react-query to peer dependencies to allow v4 and v5 - fallback to mutation.isLoading when isPending is undefined for v4 compatibility - add cacheTime configuration alongside gcTime to support v4 cache - ignore .mcp.json in git
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #300 +/- ##
==========================================
- Coverage 89.47% 89.45% -0.03%
==========================================
Files 156 157 +1
Lines 13070 13091 +21
Branches 1419 1729 +310
==========================================
+ Hits 11694 11710 +16
- Misses 1376 1381 +5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| "react-dom": "^16.11.0 || ^17 || ^18 || ^19.2.1", | ||
| "react-hook-form": "^7.0.0" | ||
| "react-hook-form": "^7.0.0", | ||
| "@tanstack/react-query": "^4.36.1 || ^5.0.0" |
There was a problem hiding this comment.
the initial requirement was to not have peer dependency, we should be able to provide an override from consume for specific use cases
|
|
||
| const handleCancelDelete = useCallback(() => { | ||
| if (deleteMutation.isPending) return; | ||
| if (deleteMutation.isPending ?? (deleteMutation as any).isLoading) return; |
There was a problem hiding this comment.
to make it more type safe
`import type { UseMutationResult } from '@tanstack/react-query';
type MutationV4Compat = { isLoading?: boolean };
export function isMutationPending<T extends Pick<UseMutationResult, 'isPending'> & MutationV4Compat>(
mutation: T
): boolean {
return mutation.isPending ?? mutation.isLoading ?? false;
}`
| setIsDeleteDialogOpen(false); | ||
| setFactorToDelete(null); | ||
| }, [deleteMutation.isPending]); | ||
| }, [isMutationPending(deleteMutation)]); |
There was a problem hiding this comment.
should we only have **deleteMutation**
|
|
||
| # Generated API documentation | ||
| docs-api/ | ||
|
|
3 participants
Summary
Adds React Query v4 compatibility to packages/react so consumers on @tanstack/react-query v4 or v5 can use the library without a version conflict.
Why
@tanstack/react-query was a hard dependency pinned to v5, which blocked consumers already on v4 from adopting the library. Relying on a single major version also made the package incompatible with projects that cannot easily migrate past the v4→v5 breaking API changes (isPending, gcTime, keepPreviousData).
What
Packages
packages/corepackages/reactexamplesReferences
Testing
How can this be verified? Note anything intentionally not covered by tests and why.
Checklist
Contributing