Mutations and Queries in React Contexts causing unexpected behaviors

In my organization, we recently moved to put all of our mutations/queries into React Contexts and out of components (NextJS with React 18). I am now seeing requests and debouncing behaviors that used to work no longer work.
In some cases it appears we now have race conditions as loading/success are not necessarily being handled, but in other cases we're not getting reactivity from mutations that are in contexts Anyone else have experience or tips re: throwing tRPC stuff into React Contexts?
N
Nick•409d ago
This sounds more of a React Query issue, rather than with the tRPC integration And also likely, it's a PEBCAK for React and React Query
N
Nick•409d ago
What I am seeing is after getting moved to Context, these mutations are always idle, as they're apparently being reconstituted on re-render
N
Nick•409d ago
There's probably no need to hoist up into contexts, React Query already does caching in a context, and if you need to fix waterfalls you can use RQ's prefetch method Ah yes, each useMutation will be its own instance I think and react has some footguns around Context where you could accidentally be re-mounting your entire tree repeatedly put in 
useEffect(() => console.log("MOUNT"), [])
useEffect(() => console.log("MOUNT"), [])
and see if you get multiple MOUNT logs in some compnents
N
Nick•409d ago
yeah getting two mounts on a page that is reliant on context
N
Nick•409d ago
So long as it doesn’t remount when triggering the mutations or queries you’re probably okay React in strict mode does some remounting fun to show up bugs for you, so twice on first render isn’t a big deal
N
Nick•409d ago
interesting behavior: a mutation with an onSuccess redirect is always idle when i pull it from context and use it on a page, but if i hit "Back" on the page that mutation redirects me to, the fired-off mutation is pulled from the context with "isSuccess: true"
More Posts
Custom error managementHey peeps! I could've sworn I created a GitHub issue about this, but I must've been dreaming, becauscontext questionWhy are the context examples only showing opinionated examples with next/react auth ? Also i find itasync middlewareis it possible to define an async middleware? I want to do something like this but it throws errors The type of the second route of the nested route is neverhttps://github.com/StringKe/nx-mulit-trpc-type-error/blob/main/apps/app1/src/pages/index.tsx#L12errorFormatter ignored when using appRouter.createCallerMy errorFormatter works correctly in the actual application using an adapter, e.g. ``` trpcExpress.Is there a way to define the Websocket protocol when using wsLink()I am attempting to use tRPC with Azure's Pub/Sub Websockets service it appears to require custom proThe inferred type of this node exceeds the maximum length the compiler will serialize.Hey, there I am running into this error when I have more than 12 routers in the mergeRouters functioQuickstart not workingHello there, There is a type error in the quickstart example if i'm not mistaken. I pretty much coUse TRPC function inside of a TRPC functionHi all! We have a trpc query called getProduct. I want to use this getProduct query inside of anotheSupabase with trpcWhen trying to configure trpc with supabase, getting this kind of error in the console `tRPC failed Using tRPC for uploading audio filesI want to create an api router in tRPC but am not sure if the following code is doable with tRPC. IfEnigmatic INTERNAL SERVER ERRORIm having a problem finding out about what is causing the INTERNAL SERVER ERROR from tRPC in my prodcreateProxySSGHelpers type errorHi all! Anyone know how to use createProxySSGHelpers with appropriate createContext typing?Can I force metadata with the createCaller?I have custom metadata which I check within the middleware. Im trying to write tests for this. CurreVitest error testHow can I test for specific TRPCError code with vitest? I managed to get the message but can't figurUsing generics duplicates the types instead of referring to the existing typesHi! I'm creating a backend API using TRPC, where I'm encountering a slight problem. TL;DR; when defSet custom header for fetchRequestHandlerIs this possible? currently getting cors issue. Trying to use nextjs's edge function with trpc.. ``How to enforce usequery as NonNullableI have a custom hook with infinite query. I check for undefined at the app first render and then it How to call useQuery with params inside JSXHow can i achieve this? Thanks ``` export function MemberQueryList({ list }: Props) { function Sharing EnumOn the backend: I have colocated files with types and procedures (index.ts - procedures, schemas.ts