\r\n \u003C/ZodParser>\r\n \u003C/query>\r\n \u003Cquery name=\"getUser\">\r\n \u003CProtectedProcedure>\r\n \u003CGetUserProcedure />\r\n \u003C/ProtectedProcedure>\r\n \u003C/query>\r\n \u003C/router>\r\n \u003C/SessionContext.Provider>\r\n );\r\n});\r\n```\r\n\r\nLet's break this down.\r\n\r\n# Rendering\r\nEach request corresponds to a render. Only those procedures requested will be run on each render.\r\n```ts\r\nconst AppRouter = withTRPC(() => {\r\n // ...\r\n});\r\n```\r\nThe `withTRPC` function wrapper is necessary to get `req` and `res`.\r\n\r\n# Context\r\nAll context will be done like React:\r\n```tsx\r\nconst SessionContext = createContext();\r\n\r\nconst AppRouter = withTRPC(() => {\r\n const { req, res } = useTrpcRequestContext();\r\n const session = useMemo(() => getServerAuthSession(req, res), []);\r\n\r\n return (\r\n // session will be passed down to all procedures\r\n \u003CSessionContext.Provider value={session}>\r\n {/* ... */}\r\n \u003C/SessionContext.Provider>\r\n );\r\n});\r\n```\r\n\r\n# Middleware\r\nReact already has a composition pattern so we can just hook into that for middleware:\r\n```ts\r\nconst ProtectedProcedure = (props: { children: ReactNode }) => {\r\n // session passed down from `SessionContext.Provider`\r\n const session = useContext(UserContext);\r\n\r\n // bail out if no user\r\n if (!session || !session.user) {\r\n throw new TRPCError({ code: \"UNAUTHORIZED\" });\r\n }\r\n\r\n return (\r\n \u003CUserContext.Provider value={session.user}>\r\n {props.children}\r\n \u003C/UserContext.Provider>\r\n );\r\n};\r\n```\r\n\r\n# Procedures\r\nThere are a few internal JSX elements for declaring procedures: `query`, `mutation`, and `subscription`, all which require the procedure name.\r\n```ts\r\n// this is the actual resolver for the procedure\r\nconst GreetingProcedure = () => {\r\n // automatically typed (call it a gift from God)\r\n const { name } = useArgsContext\u003C{ name: string }>();\r\n\r\n return `Hello ${name}`;\r\n};\r\n\r\nconst AppRouter = withTRPC(() => {\r\n return (\r\n \u003Crouter>\r\n {/* this marks the procedure as a query in the router tree */}\r\n \u003Cquery name=\"greeting\">\r\n \u003CGreetingProcedure />\r\n \u003C/query>\r\n \u003C/router>\r\n );\r\n});\r\n```\r\n\r\n## Input Validation\r\n```ts\r\nconst GreetingProcedure = () => {\r\n const { name } = useArgsContext();\r\n\r\n return `Hello ${name}`;\r\n};\r\n\r\nconst AppRouter = withTRPC(() => {\r\n return (\r\n \u003Crouter>\r\n \u003Cquery name=\"greeting\">\r\n {/* this parses the input data from the request and passes it on using the internal ArgsContext */}\r\n \u003CZodParser schema={z.object({ name: z.string() })}>\r\n \u003CGreetingProcedure />\r\n \u003C/ZodParser>\r\n \u003C/query>\r\n \u003C/router>\r\n );\r\n});\r\n```\r\n\r\n\r\n# Router\r\nRouters and procedures can be nested like any other JSX element:\r\n```ts\r\nconst AppRouter = withTRPC(() => {\r\n return (\r\n \u003Crouter>\r\n \u003Cquery name=\"greeting\">\r\n \u003CGreetingProcedure />\r\n \u003C/query>\r\n {/* everything under this router will be mounted at user.* */}\r\n \u003Crouter name=\"user\">\r\n {/* this mutation is mounted at user.createUser */}\r\n \u003Cmutation name=\"createUser\">\r\n \u003CZodParser schema={z.object({ name: z.string(), age: z.number() })}>\r\n \u003CCreateUserMutation />\r\n \u003C/ZodParser>\r\n \u003C/mutation>\r\n \u003C/router>\r\n \u003C/router>\r\n );\r\n});\r\n```\r\n\r\n### Describe alternate solutions\r\n\r\nMaybe Svelte or Vue could offer better syntax and typesafety 🧐\r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [X] 🙋♂️ Yes, I'd be down to file a PR implementing this feature!",[2922],{"name":2923,"color":2924},"RFC","78B062",4124,"[RFC]: tRPC Server JSX API","2023-04-21T18:01:53Z","https://github.com/trpc/trpc/issues/4124",0.7135223,{"description":2931,"labels":2932,"number":2933,"owner":2853,"repository":2853,"state":2892,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Provide environment information\r\n\r\n System:\r\n OS: macOS 13.2.1\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 36.42 MB / 64.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn\r\n npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm\r\n Browsers:\r\n Chrome: 111.0.5563.146\r\n Firefox: 109.0.1\r\n Safari: 16.3\r\n\r\nAlso:\r\n\r\n\r\n \"@tanstack/react-query\": \"^4.28.0\",\r\n \"@trpc/client\": \"^10.18.0\",\r\n \"@trpc/react-query\": \"^10.18.0\",\r\n \"@trpc/server\": \"^10.18.0\",\r\n \"react-native\": \"0.71.4\",\r\n \"react\": \"18.2.0\",\r\n\r\n### Describe the bug\r\n\r\nI am using trpc@10 with **react-native**, and I have implemented the trpc-api with Next.js. I am trying to use a `trpc.wakeUp.useMutation` function to trigger an onError callback when there is an error during the mutation process.\r\n\r\nThe `wakeUp` procedure in the trpc API is defined as follows:\r\n\r\n```tsx\r\nwakeUp: publicProcedure.mutation(async () => {\r\n throw new TRPCError({\r\n code: \"BAD_REQUEST\",\r\n message: \"not implemented\",\r\n });\r\n}),\r\n```\r\n\r\nWhen I use the following code with `trpc.wakeUp.useMutation`, the onError callback is not triggered:\r\n\r\n\r\n```tsx\r\nconst wakeUp = trpc.wakeUp.useMutation({\r\n onSuccess: () => {\r\n console.log(\"waking up\");\r\n },\r\n onError: () => {\r\n console.log(\"this will never be logged\");\r\n },\r\n});\r\n\r\n\r\nconst handleClick = () => wakeUp.mutate() // \u003C--- will not fire the onError\r\n```\r\n\r\n\r\nHowever, when I use the following code with `wakeUp.mutate`, the onError callback is successfully triggered:\r\n\r\n```tsx\r\nconst handleClick = () =>\r\n wakeUp.mutate(undefined, {\r\n onError: () => {\r\n console.log(\"this is being logged\"); // \u003C---- this will be fired\r\n },\r\n });\r\n```\r\n\r\n### Link to reproduction\r\n\r\n/\r\n\r\n### To reproduce\r\n\r\nIf necessary i can provide a reproducable example.\r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### 👨👧👦 Contributing\r\n\r\n- [X] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!",[],4121,"bug: useMutation does not trigger onError callback in react-native when calling procedure","2023-04-15T12:02:05Z","https://github.com/trpc/trpc/issues/4121",0.7139529,{"description":2939,"labels":2940,"number":2941,"owner":2853,"repository":2853,"state":2892,"title":2942,"updated_at":2943,"url":2944,"score":2945},"Noob question.\r\n\r\nHow would one go for globally handling client side errors?\r\n\r\nlets say i want the user to be redirected client side to a specific url on \"UNAUTHORIZED\" errors globally without specifying it on every mutation or query?\r\n\r\nmaybe its react query and has nothing to do with trpc?",[],2035,"Global Client Error Handling","2022-06-23T14:24:07Z","https://github.com/trpc/trpc/issues/2035",0.71404487,["Reactive",2947],{},["Set"],["ShallowReactive",2950],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPaPbolj6RPOOXxhcDOFDTcmKbD6fOXNMCYW4BWPaK0A":-1},"/trpc/trpc-openapi/318"]