19 replies

Setting up vanilla trpc client

So I have a button and when that button is clicked I want it to do some trpc mutation.

After doing some searching and seeing this response in a different post here how can I invoke a trpc call inside a nested function? I concluded that the best way to do this was to setup a vanilla trpc client following the linked guide(https://trpc.io/docs/client/vanilla/setup)

But after following that guide I get a typescript error when I build and when I try to click the button in the dev environment I get a runtime error. So what am I doing wrong?

repo(dev branch is where stuff is): [linked repo that isn't in the state it was when I asked this]

probably relevant files:

src/pages/wip.tsx

src/pages/wip.tsx

src/server/api/routers/itemlist.ts

src/server/api/routers/itemlist.ts

and

src/server/api/root.ts

src/server/api/root.ts

Solution

alright I solved this myself and yeah, I marked it as noob for a reason

so yeah(

is src dir not unix home dir)

~/utils/api.ts

~/utils/api.ts

creates the react query version of things and that version has the correct object to pass into

createTRPCProxyClient

createTRPCProxyClient

so I just copy pasted it into that resulting in this

export const vanilla_api = createTRPCProxyClient<AppRouter>({
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
});

export const vanilla_api = createTRPCProxyClient<AppRouter>({
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
});

which seems to work for what I want/need to do

Jump to solution

Setting up vanilla trpc client

src/pages/wip.tsx

src/pages/wip.tsx

src/server/api/routers/itemlist.ts

src/server/api/routers/itemlist.ts

and

src/server/api/root.ts

src/server/api/root.ts

Solution

alright I solved this myself and yeah, I marked it as noob for a reason

so yeah(

is src dir not unix home dir)

~/utils/api.ts

~/utils/api.ts

creates the react query version of things and that version has the correct object to pass into

createTRPCProxyClient

createTRPCProxyClient

so I just copy pasted it into that resulting in this

export const vanilla_api = createTRPCProxyClient<AppRouter>({
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
});

export const vanilla_api = createTRPCProxyClient<AppRouter>({
      /**
       * Transformer used for data de-serialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
});

which seems to work for what I want/need to do

Jump to solution

Setting up vanilla trpc client

Similar Threads

Setting up vanilla trpc client

Similar Threads

Similar Threads

Similar Threads