tRPC•4y ago•

17 replies

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

window

_app.tsx

_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()

client.myRouter.create.mutate()

like i can do with my queries

client.myRouter.byId.fetch()

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...

How to execute mutation outside of react context?

window

window

_app.tsx

_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("...");

client.myRouter.create.mutate()

client.myRouter.create.mutate()

like i can do with my queries

client.myRouter.byId.fetch()

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...

GitHub

How to call a trpc mutation from outsize a component · Discussion #...

How to execute mutation outside of react context?

How to execute mutation outside of react context?

Similar Threads

Similar Threads

Similar Threads