DX: using `client` as the route name causes an error
Problem
Provide environment information [code block] Describe the bug I've created a route and named it `client` but I get this error when trying to use `trpc.useContext()` [code block] I could fix the issue by renaming it to `clientRoute` and the problem was solved Link to reproduction https://stackblitz.com/github/trpc/examples-next-minimal-starter To reproduce Create a route and name it `client`, This should trigger an error as shown in the video below: https://user-images.githubusercontent.com/56588770/216343859-4bd76863-845e-45bd-a664-0911b4ed0054.mov Additional information _No response_ 👨👧👦 Contributing - [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug! <sub>TRP-54</sub>
Error Output
error when trying to use `trpc.useContext()`
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Rename Route from 'client' to Avoid Context Error
The error occurs because the route name 'client' conflicts with a reserved keyword or internal identifier used by the TRPC library, leading to issues when invoking `trpc.useContext()`. This naming collision prevents the proper functioning of context hooks.
Awaiting Verification
Be the first to verify this fix
- 1
Identify the Route Definition
Locate the route definition in your application where the route is currently named 'client'. This is typically found in your router setup file.
typescriptconst appRouter = createRouter().query('client', { resolve: () => { /* ... */ } }); - 2
Rename the Route
Change the name of the route from 'client' to a different name, such as 'clientRoute', to avoid conflicts with internal identifiers.
typescriptconst appRouter = createRouter().query('clientRoute', { resolve: () => { /* ... */ } }); - 3
Update All References
Search through your codebase for any references to the old route name 'client' and update them to 'clientRoute' to ensure consistency throughout the application.
typescript// Update usage in components const { data } = trpc.useQuery(['clientRoute']); - 4
Test the Application
Run your application and navigate to the parts of the app that utilize the renamed route. Ensure that there are no errors related to `trpc.useContext()` and that the application behaves as expected.
bashnpm start
Validation
Confirm that the error no longer appears when using `trpc.useContext()` and that all functionalities related to the renamed route work correctly. Check the console for any errors and verify the data fetching works as intended.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep