How to execute mutation outside of react context?

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...
8 Replies
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Jordan (UNCVRD)
Jordan (UNCVRD)OP3y ago
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
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Jordan (UNCVRD)
Jordan (UNCVRD)OP3y ago
interesting! however im also trying to stay away from generators 😬 (had "lots" of fun with those during my graphql days lol)
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Jordan (UNCVRD)
Jordan (UNCVRD)OP3y ago
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 🤔
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Jordan (UNCVRD)
Jordan (UNCVRD)OP3y ago
unable to use mutations tho