T
tRPC

โ“-help

How to execute mutation outside of react context?

JUJordan (UNCVRD)10/30/2022
Hi! I'm slowly converting code over to v10 - looks great! However, I ran in to an issue when using tRPC within my xstate state machine. I need to run a mutation in one of my states, and since this runs outside of react context, Alex had instructed for me to do the following in v9: 1. set the following property on window in _app.tsx
const trpcClient = trpc.useContext();
const trpcClient = trpc.useContext();
useEffect(() => {
if (typeof window !== "undefined") {
(window as any).trpcClient = trpcClient.client;
}
}, [trpcClient])
useEffect(() => {
if (typeof window !== "undefined") {
(window as any).trpcClient = trpcClient.client;
}
}, [trpcClient])
2. Then create a helper function:
export const getTRPCClient = (): ReturnType<typeof trpc["useContext"]["client"]> => {
return (window as any).trpcClient;
};
export const getTRPCClient = (): ReturnType<typeof trpc["useContext"]["client"]> => {
return (window as any).trpcClient;
};
3. So now I could do the following in my xstate async method:
const client = getTRPCClient();
const url = await client.mutation("...");
const client = getTRPCClient();
const url = await client.mutation("...");
However this approach no longer works with v10. I was curious as to how I should approach this now? Thank you! ---- EDIT: should I just be creating a duplicate vanilla trpc proxy client with essentially the same configuration now? seems a bit redundant though...would be nice to be able to access my mutations like client.myRouter.create.mutate() like i can do with my queries client.myRouter.byId.fetch() Relevant discussions: https://github.com/trpc/trpc/discussions/2926 https://github.com/trpc/trpc/discussions/1351
GitHub
bug: TRPCClient from createTRPCReact().createClient is incorrec...
Provide environment information System: OS: macOS 12.5.1 CPU: (8) arm64 Apple M1 Memory: 157.83 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/nod...
GitHub
How to call a trpc mutation from outsize a component ยท Discussion #...
I am setting up a refresh and access token for my app. The app retrieves the refresh token when the user signs in. The tokens are stored in Redux. The access token expires after 5 minutes. Before e...
UUUnknown User10/30/2022
2 Messages Not Public
Sign In & Join Server To View
JUJordan (UNCVRD)10/30/2022
Thanks yea - I have tried this approach in the past but it's quite frustrating having to redefine the queries/mutations every time I need to re-use a state machine. It would really be great to be able to define all these actions hook-less within the machine :/ At a higher level, I guess I'm also just confused why react-query exposes a fetch method but not a mutate method anymore
UUUnknown User10/31/2022
3 Messages Not Public
Sign In & Join Server To View
JUJordan (UNCVRD)10/31/2022
interesting! however im also trying to stay away from generators ๐Ÿ˜ฌ (had "lots" of fun with those during my graphql days lol)
UUUnknown User10/31/2022
4 Messages Not Public
Sign In & Join Server To View
JUJordan (UNCVRD)10/31/2022
yea definitely is a common issue, weird there isn't a unified solution that doesnt feel like a workaround quite yet. I'm leaning towards just creating a duplicate vanilla router for now ๐Ÿค”
UUUnknown User11/2/2022
4 Messages Not Public
Sign In & Join Server To View
JUJordan (UNCVRD)11/2/2022
unable to use mutations tho

Looking for more? Join the community!

T
tRPC

โ“-help

Join Server
Recommended Posts
When not to use tRPC?Is there any scenario when building a mobile and/or a web app with backend that you would not recommBi directional infinite query example with prismaI'm working on a project that is using this pattern, but my `hasPreviousPages` gets blown away when Websockets not sending dataHi, I have a websocket route that doesn't seem to be sending any data I added a setInterval to tesQuery keysHi! I'm super new to TRPC and based on my understanding, TRPC has a thin wrapper around react query.Possible to use tRPC proxy client inside Edge Runtime?Hi, im trying to fetch a route from trpc inside a Vercel Edge Runtime function. Therefore im tryinIs inferRouterInputs & inferRouterOutputs exported from trpc-server?"@trpc/server": "10.0.0-proxy-beta.26",v10 migration using codemodSo I've been looking at the codemod that helps with transition towards v10 and I haven't been able tSSR and loading indicators - I don't get itGuess I'm missing something here, but unfortunately I'm having a hard time with the docs: in https:/Prefetch forEachHello, I'm trying to prefetch a list of procedures like this ```ts type QueryKeys = { // how to tNextJs middleware broken by tRPCHi, I have a NextJs middleware that is redirecting to the login page. Basically an Auth guard over mHow to infer the output of a mutation? The current methods appear to be depreciated.I am attempting to export the bellow utility function to use client side to infer an output type thaTrouble inferring the type of a very simple structure of nested routersA very simple router results in an inference error, causing the client to not be able to infer the rcalling trpc endpoints from vanilla nextJs api routesI'm struggling to find what's the best way to call a trpc endpoint directly from the server. BasicalMultiple React providersGood morning! Is there any workaround, how to use multiple trpc-client instances with react-query? IMutation type issueI'm trying to mutate something like this with tRPC and Prisma ```const updateColumn = trpc.project.uCan I redirect the user from inside my router?I have a query protectedProcedure, which returns an object from my prisma planetscale db What's theInfer the type of ctx for a specific procedureLet's say I had a helper function that I wanted to pass the context to, I can't use the default ContCORS in standalone serverHi, I'm trying to get CORS working in standalone server. Attempted this solution but unfortunatelyQueries break when in production on Vercel; work on localhostThe query is called like this: ```javascript const { data } = api.useQuery(["user.!getCount"], { Can't get client to workHi, I can't get my client to work I'm using Next.js but I have also tried the React method from the