MonkeyStruct Posts

MonkeyStruct

•Created by MonkeyStruct on 4/8/2024 in #❓-help

Using TRPC Server Caller in client side.

What's up TRPCer. so i'm currently working in vanilla react app with seperate backend in .NET, in previous projects i have used Next with TRPC server and honestly loved DX with it so i wanted to implement it for the react app and parse .NET server response in TRPC route func and utilize @trpc/server pkg that way and use createCaller instance to use like almost server/query func. intention was to use tanstack react query and trpc routes as basically queryFn. Seems like that wont work tho. trpc throws not allowed to use server func in client side error. Is there a way to make it work? or TRPC requires a server implemented with trpc server.

1 replies

TtRPC

•Created by MonkeyStruct on 5/2/2023 in #❓-help

createTRPCNext config ctx always returns undefined.

Hi Everyone. So I'm trying to use TRPC and Nextjs for auth and post query etc. I have client side createTRPCNext below.

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            if (!ctx || !ctx.req || !ctx.res) {
              return {};
            }
            const cookies = new Cookies(ctx.req, ctx.res);
            const token = cookies.get("jwt");
            return {
              Authorization: token ? `Bearer ${token}` : "",
            };
          },
        }),
      ],
    };
  },
});

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            if (!ctx || !ctx.req || !ctx.res) {
              return {};
            }
            const cookies = new Cookies(ctx.req, ctx.res);
            const token = cookies.get("jwt");
            return {
              Authorization: token ? `Bearer ${token}` : "",
            };
          },
        }),
      ],
    };
  },
});

when i try to access ctx in config opts it always returns undefined. type says it is NextPageContext | undefined, so i'm guessing i'm missing something. Please let me know if you guys have any ideas. Also, if you have any idea on using http-proxy with trpc server for cookie assignment etc would be amazing. I been trying to set cookies in proxy server and following this blog's steps https://maxschmitt.me/posts/next-js-http-only-cookie-auth-tokens With proxy route simple queries works but when i selfHandleResponse and return response, I get TRPCClientError. Thank you for all the help!

5 replies

TtRPC

•Created by MonkeyStruct on 4/25/2023 in #❓-help

createTRPCNext type error

Hi everyone. So I started creating nextjs app with trpc + prisma set up. and when i use my AppRouter type with createTRPCNext I get "The types returned by createCaller(...) are incompatible between these types." error

Type 'CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>' does not satisfy the constraint 'Router<AnyRouterDef<AnyRootConfig, any>>'.
  The types returned by 'createCaller(...)' are incompatible between these types.
    Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ auth: CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<...>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>; user: CreateRouter...' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; } & DecoratedProcedureRecord<any>'.
      Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ auth: CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<...>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>; user: CreateRouter...' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; }'.
        Types of property 'query' are incompatible.
          Type 'inferHandlerFn<{}>' is not assignable to type 'inferHandlerFn<any>'.
            Types of parameters 'path' and 'path' are incompatible.
              Type 'TPath' is not assignable to type 'never'.
                Type 'string' is not assignable to type 'never'.

Type 'CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<PrismaClientOptions, never, RejectOnNotFound | RejectPerOperation | undefined>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>' does not satisfy the constraint 'Router<AnyRouterDef<AnyRootConfig, any>>'.
  The types returned by 'createCaller(...)' are incompatible between these types.
    Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ auth: CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<...>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>; user: CreateRouter...' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; } & DecoratedProcedureRecord<any>'.
      Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ auth: CreateRouterInner<RootConfig<{ ctx: { user: User | null; prisma: PrismaClient<...>; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>, { ...; }>; user: CreateRouter...' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; }'.
        Types of property 'query' are incompatible.
          Type 'inferHandlerFn<{}>' is not assignable to type 'inferHandlerFn<any>'.
            Types of parameters 'path' and 'path' are incompatible.
              Type 'TPath' is not assignable to type 'never'.
                Type 'string' is not assignable to type 'never'.

this is whole error msg and I'm not sure if you guys have seen it!

6 replies

TtRPC

•Created by MonkeyStruct on 1/15/2023 in #❓-help

tRPC context and NextJS

Guys quick question about using trpc and nextjs. I'm using context with trpc to create some queries that will be only accessible by logged in users. On nextjs side I'm using react context to manage it for now. So my thinking was to pass one of the ctx variable that will be user ID to trpc server when I use useQuery. Ex) trpc.user.getSecret.useQuery(undefined, {req.body}). But I'm honestly stuck on how I can send next request body. Code for trpc context is this.

export const createContext = async (opts: CreateNextContextOptions) => { 
   // console.log(opts.req, "inside trpc context"); 
   async function getUser() { 
     console.log(opts.req.body, "res body"); 
     const user = await prisma.user.findUnique({ 
       where: { id: opts.req.body.id ? opts.req.body.id : "" }, 
     }); 
  
     return user ? user : null; 
   } 
   const user = await getUser(); 
  
   return await createContextInner({ user }); 
 };

export const createContext = async (opts: CreateNextContextOptions) => { 
   // console.log(opts.req, "inside trpc context"); 
   async function getUser() { 
     console.log(opts.req.body, "res body"); 
     const user = await prisma.user.findUnique({ 
       where: { id: opts.req.body.id ? opts.req.body.id : "" }, 
     }); 
  
     return user ? user : null; 
   } 
   const user = await getUser(); 
  
   return await createContextInner({ user }); 
 };

I know you can change body in api/[trpc] route but I won't have access to ReactContext there so if any of you guys have a suggestion or solution please let me know. 🙏🙏🙏

4 replies