Theo's Typesafe Cult•12mo ago

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 https://discord.com/channels/966627436387266600/1126264396285481151/1126264611008696320 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/server/api/routers/itemlist.ts and 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 creates the react query version of things and that version has the correct object to pass into createTRPCProxyClient so I just copy pasted it into that resulting in this ```ts export const vanilla_api = createTRPCProxyClient<AppRouter>({...

Jump to solution

12 Replies

pagwin•12mo ago

typescript error:

Type error: Argument of type '{ links: TRPCLink<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>[]; }' is not assignable to parameter of type 'CreateTRPCClientOptions<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>'.
  Property 'transformer' is missing in type '{ links: TRPCLink<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>[]; }' but required in type '{ transformer: typeof SuperJSON; }'.

   6 | import {useState,type ChangeEvent} from "react";
   7 | 
>  8 | const trpc = createTRPCProxyClient<AppRouter>({
     |                                               ^
   9 |     links: [
  10 |     httpBatchLink({
  11 |        url: "http://localhost:3000"

Type error: Argument of type '{ links: TRPCLink<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>[]; }' is not assignable to parameter of type 'CreateTRPCClientOptions<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>'.
  Property 'transformer' is missing in type '{ links: TRPCLink<CreateRouterInner<RootConfig<{ ctx: { session: Session | null; prisma: PrismaClient<Prisma.PrismaClientOptions, never, Prisma.RejectOnNotFound | Prisma.RejectPerOperation | undefined, DefaultArgs>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>>[]; }' but required in type '{ transformer: typeof SuperJSON; }'.

   6 | import {useState,type ChangeEvent} from "react";
   7 | 
>  8 | const trpc = createTRPCProxyClient<AppRouter>({
     |                                               ^
   9 |     links: [
  10 |     httpBatchLink({
  11 |        url: "http://localhost:3000"

runtime error:

Unhandled Runtime Error

TRPCClientError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Call Stack
TRPCClientError
node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs (23:0)
from
node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs (13:0)
<unknown>
httpBatchLink/</</</<@webpack-internal:///./node_modules/@trpc/client/dist/httpBatchLink-c184c799.mjs (205:101)

Unhandled Runtime Error

TRPCClientError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Call Stack
TRPCClientError
node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs (23:0)
from
node_modules/@trpc/client/dist/transformResult-9a244fe7.mjs (13:0)
<unknown>
httpBatchLink/</</</<@webpack-internal:///./node_modules/@trpc/client/dist/httpBatchLink-c184c799.mjs (205:101)

reason I tagged this react query btw is because this may be an XY problem and there's actually some way using that to do what I want

Solution

pagwin•11mo ago

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

cje•11mo ago

i think youre misinterpeting whats being said in the linked post like it works but you don't need the vanilla client for this what you can do is

const someMutation = api.router.procedure.someMutation();
return <button onClick={() => someMutation.mutate()}>Click me</button>

const someMutation = api.router.procedure.someMutation();
return <button onClick={() => someMutation.mutate()}>Click me</button>

pagwin•11mo ago

yeah it seems that way, it also seems that I didn't know how to use react query it seems I can't mark your response as a solution due to marking my own thing as a solution which is annoying but oh well thanks

cje•11mo ago

@Rhys as reece feature request

Rhys•11mo ago

Thanks for the ping @pagwin are you wanting the ability to mark multiple responses as the solution or change the answer?

cje•11mo ago

personally both seem reasonable, but the ability to change the "correct" answer seems more important

Rhys•11mo ago

Yeah I’d agree with that, I’ve mean meaning to add support for changing the answer I’ll hopefully get to that by the end of this week

cje•11mo ago

but if theres two good answers then being able to surface both to google feels cool also. definitely less important though

pagwin•11mo ago

tbh my random complaint was not intended as a feature request, I agree with that cje said though

Rhys•11mo ago

Well your getting features now poohheh

enjoy

pagwin•11mo ago

*you're ~~I always use it's even when I should use its so I shouldn't be throwing stones~~

Gaming

Programming

Setting up vanilla trpc client