feat: Support react-query@5 and edge
Problem
> ℹ️ Note from maintainers > > We have support for tanstack query 5 in our new major - see @juliusmarminge comment here > > You can upgrade using something akin to > > [code block] Describe the feature you'd like to request So `react-query` just had a new major version bump which removes some react kludge, which hopefully will make it tRPC + query compatible with edge runtimes (i.e. CF workers, Vercel edge etc.) Describe the solution you'd like to see https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5 describes migration steps. Would need some updates to `@trpc/next`. Describe alternate solutions I believe there's nothing inherently breaking on edge runtimes in `@trpc/next`, so it's up to `react-query`. Additional information _No response_ 👨👧👦 Contributing - [ ] 🙋♂️ Yes, I'd be down to file a PR implementing this feature! <sub>TRP-25</sub>
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Upgrade to react-query@5 for tRPC Compatibility with Edge Runtimes
The recent major version bump of react-query to version 5 introduces significant changes that improve compatibility with edge runtimes like Cloudflare Workers and Vercel Edge. The previous version had some limitations that hindered seamless integration with these environments, particularly due to reliance on React's internal state management that has been removed in v5.
Awaiting Verification
Be the first to verify this fix
- 1
Update package dependencies
Modify your package.json to upgrade react-query to version 5 and ensure that @trpc/next is compatible with this version.
bashnpm install @tanstack/react-query@latest @trpc/next@latest - 2
Refactor query hooks
Refactor any existing query hooks in your application to align with the new API introduced in react-query v5. This includes updating the way queries and mutations are defined.
typescriptconst { data, error } = useQuery(['key'], fetchFunction); - 3
Test edge runtime compatibility
Deploy your application to an edge runtime environment (e.g., Vercel Edge or Cloudflare Workers) and test the functionality of your queries and mutations to ensure they operate as expected.
bashvercel deploy - 4
Update documentation
Ensure that any internal documentation reflects the changes made during the upgrade process, including new usage patterns for react-query v5.
markdownUpdate README.md with new examples. - 5
Monitor for issues
After deployment, monitor the application for any runtime errors or performance issues that may arise from the upgrade.
bashUse logging tools to track errors.
Validation
Confirm that all queries and mutations function correctly in the edge environment without any errors. Additionally, check that the application behaves as expected under load and that there are no performance regressions.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep