Jordan (UNCVRD)•2y ago

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•2y ago

Message Not Public

Jordan (UNCVRD)•2y 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•2y ago

Message Not Public

Jordan (UNCVRD)•2y ago

interesting! however im also trying to stay away from generators 😬 (had "lots" of fun with those during my graphql days lol)

Unknown User•2y ago

Message Not Public

Jordan (UNCVRD)•2y 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•2y ago

Message Not Public

Jordan (UNCVRD)•2y ago

unable to use mutations tho