BillyBob Comments - tRPC

BillyBob

•Created by BillyBob on 3/24/2024 in #❓-help

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

I solved it. This was due to having use server at the top of my server.ts file for interacting with tRPC on the server side. I replaced it with import server-only to discover this issue I followed the error to the code within node_modules

node_modules/.pnpm/@trpc+client@11.0.0-next.320_@trpc+server@11.0.0-next.320/node_modules/@trpc/client/dist/createTRPCClient.mjs

added some debugging like so:

 */ function createTRPCClientProxy(client) {
    return createFlatProxy((key)=>{
        if (client.hasOwnProperty(key)) {
            return client[key];
        }
        if (key === '__untypedClient') {
            return client;
        }
        return createRecursiveProxy(({ path , args  })=>{
            const pathCopy = [
                key,
                ...path
            ];
            const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
            const fullPath = pathCopy.join('.');
            console.log({client})
            console.log({procedureType})
            console.log({fullPath})
            console.log({pathCopy: pathCopy.pop()})
            if (!client[procedureType]) {
                 return;
             }
            return client[procedureType](fullPath, ...args);
        });
    });
}

 */ function createTRPCClientProxy(client) {
    return createFlatProxy((key)=>{
        if (client.hasOwnProperty(key)) {
            return client[key];
        }
        if (key === '__untypedClient') {
            return client;
        }
        return createRecursiveProxy(({ path , args  })=>{
            const pathCopy = [
                key,
                ...path
            ];
            const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
            const fullPath = pathCopy.join('.');
            console.log({client})
            console.log({procedureType})
            console.log({fullPath})
            console.log({pathCopy: pathCopy.pop()})
            if (!client[procedureType]) {
                 return;
             }
            return client[procedureType](fullPath, ...args);
        });
    });
}

From here I got a new error. Which was saying the server.ts tRPC connecter was exporting a non-async function, which you cannot do if marking the file at the top with use server I removed the use server from the top, replaced with use server-only removed the debugging lines added as shown above and it worked.

7 replies

•Created by BillyBob on 3/24/2024 in #❓-help

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

No description

7 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

thanks @emil Here is my current issue: https://discord.com/channels/867764511159091230/1221402424405790780 If you can help in any way its appreciated

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

because in all the examples they access the appRouter in there, but if they are separated then how can that be done

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

Are you using NextJS? how did you setup your api/trpc/[trpc] if so

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

same

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

Thanks! the versions are tthe same at least in my case. Do you guys have separated BE/server and client ?

16 replies

•Created by BillyBob on 3/24/2024 in #❓-help

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

link to repo: https://github.com/lwears/ReelScore

7 replies

•Created by BillyBob on 3/24/2024 in #❓-help

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

Here is my server link:

export const api = createTRPCProxyClient<AppRouter>({
  transformer: superjson,
  links: [
    loggerLink({
      enabled: (op) =>
        env.ENV === 'development' ||
        (op.direction === 'down' && op.result instanceof Error),
    }),
    httpBatchLink({
      url: 'http://localhost:4000/trpc',
      headers() {
        return {
          cookie: cookies().toString(),
          'x-trpc-source': 'rsc',
        }
      },
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        })
      },
    }),
  ],
})

export const api = createTRPCProxyClient<AppRouter>({
  transformer: superjson,
  links: [
    loggerLink({
      enabled: (op) =>
        env.ENV === 'development' ||
        (op.direction === 'down' && op.result instanceof Error),
    }),
    httpBatchLink({
      url: 'http://localhost:4000/trpc',
      headers() {
        return {
          cookie: cookies().toString(),
          'x-trpc-source': 'rsc',
        }
      },
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        })
      },
    }),
  ],
})

7 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

or do you have a link to your repo?

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

what as the issue ? i am getting the same problem when upgrading next to anything newer than 14.1.0

16 replies

•Created by emil on 7/5/2023 in #❓-help

TypeError: client[procedureType] is not a function

@emil Did you ever solve this?

16 replies

•Created by BillyBob on 3/21/2024 in #❓-help

Type '[]' has no properties in common with type 'MutateOptions<{ id: string....

ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'

ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'

3 replies

•Created by Tom on 8/12/2023 in #❓-help

Return TRPC Error from NextJS middleware

also not sure what changed. but now a simple

      headers() {
        return {
          cookie: cookies().toString(),
        }
      },

      headers() {
        return {
          cookie: cookies().toString(),
        }
      },

seems to work

39 replies

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

me too. i wonder if they changed something. because i am sure this didnt work before,

      headers() {
        return {
          cookie: cookies().toString(),
        }
      },

      headers() {
        return {
          cookie: cookies().toString(),
        }
      },

Because now all i need is this ^

16 replies

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

are you on 14.1 ?

16 replies

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

interesting that this works

   const session = await api.session.validate.query({
        sessionId: authCookie.value,
    });

   const session = await api.session.validate.query({
        sessionId: authCookie.value,
    });

to call tRPC in the nextJS middleware was why I needed to change the headers

16 replies

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

i had to do this:

headers(opts) {
        // Any of the passed operations can override the headers
        const headersOverride = opts.opList.find(
          (op) => op.context?.headersOverride
        )?.context.headersOverride as Record<string, string> | undefined

        

        if (headersOverride) {
          // console.log('headersOverride', headersOverride)
          // console.log('headers', Object.fromEntries(headers()))
          delete headersOverride['content-length']
          delete headersOverride['content-type']
          return headersOverride
        }

        const h = Object.fromEntries(headers())
        delete h['content-length']
        delete h['content-type']

        return h
      }

headers(opts) {
        // Any of the passed operations can override the headers
        const headersOverride = opts.opList.find(
          (op) => op.context?.headersOverride
        )?.context.headersOverride as Record<string, string> | undefined

        

        if (headersOverride) {
          // console.log('headersOverride', headersOverride)
          // console.log('headers', Object.fromEntries(headers()))
          delete headersOverride['content-length']
          delete headersOverride['content-type']
          return headersOverride
        }

        const h = Object.fromEntries(headers())
        delete h['content-length']
        delete h['content-type']

        return h
      }

16 replies

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

So you are not doing anything in Middleware right now?

16 replies

•Created by Tom on 8/12/2023 in #❓-help

Return TRPC Error from NextJS middleware

Yes i am having to do this to get it to work

headers(opts) {
        // Any of the passed operations can override the headers
        const headersOverride = opts.opList.find(
          (op) => op.context?.headersOverride
        )?.context.headersOverride as Record<string, string> | undefined

        

        if (headersOverride) {
          // console.log('headersOverride', headersOverride)
          // console.log('headers', Object.fromEntries(headers()))
          delete headersOverride['content-length']
          delete headersOverride['content-type']
          return headersOverride
        }

        const h = Object.fromEntries(headers())
        delete h['content-length']
        delete h['content-type']

        return h
      }

headers(opts) {
        // Any of the passed operations can override the headers
        const headersOverride = opts.opList.find(
          (op) => op.context?.headersOverride
        )?.context.headersOverride as Record<string, string> | undefined

        

        if (headersOverride) {
          // console.log('headersOverride', headersOverride)
          // console.log('headers', Object.fromEntries(headers()))
          delete headersOverride['content-length']
          delete headersOverride['content-type']
          return headersOverride
        }

        const h = Object.fromEntries(headers())
        delete h['content-length']
        delete h['content-type']

        return h
      }

seems messy

39 replies