TRPCError: Input parser must be a ZodObject

[dawoodaijaz97]

Hi,
I am getting the following error: TRPCError: Input parser must be a ZodObject. I am following the nextjs example provided in trpc-openapi/src/examples. Getting the same error on all trpc-open api routes [...trpc] including the openapi.json route.

I have looked through all the previous issues and can't seem to figure out what I am doing wrong.

Please let me know if additional details are required.

Regards,
Dawood

Package.json:

{
"name": "next-boilerplate",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@tanstack/react-query": "^4.20.2",
"@trpc/client": "^10.5.0",
"@trpc/next": "^10.5.0",
"@trpc/react-query": "^10.5.0",
"@trpc/server": "^10.5.0",
"@types/styled-components-react-native": "^5.1.3",
"next": "12.1.6",
"nextjs-cors": "^2.1.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-is": "^18.2.0",
"styled-components": "^5.3.5",
"superjson": "^1.12.0",
"swagger-ui-react": "^4.15.5",
"trpc-openapi": "^1.0.0",
"zod": "^3.20.2"
},
"devDependencies": {
"@types/node": "17.0.36",
"@types/react": "18.0.9",
"@types/react-dom": "18.0.5",
"@types/styled-components": "^5.1.25",
"@types/swagger-ui-react": "^4.11.0",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.2"
},
"resolutions": {
"styled-components": "^5"
}
}

[jlalmes]

Please share the full error & procedure that is causing the error.

[dawoodaijaz97]

---------------pages/api/[...trpc].ts-----------------

import { NextApiRequest, NextApiResponse } from 'next';
import cors from 'nextjs-cors';
import { createOpenApiNextHandler } from 'trpc-openapi';

import { appRouter} from '../../server/routers/_app';
import {createContext} from '../../server/context';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    await cors(req, res);
    return createOpenApiNextHandler({
        router: appRouter,
        createContext,
    })(req, res);
};

export default handler;

------------pages/api/openapi.json.ts------------

import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic(() => {
    return import("swagger-ui-react");
}, { ssr: false });

const OpenAPIPage: NextPage = () => {
    // Serve Swagger UI with our OpenAPI schema
    return <SwaggerUI url="/api/openapi.json" />;
};

export default OpenAPIPage;

------------/pages/api/openapi.tsx------------

import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

const SwaggerUI = dynamic(() => {
    return import("swagger-ui-react");
}, { ssr: false });

const OpenAPIPage: NextPage = () => {
    // Serve Swagger UI with our OpenAPI schema
    return <SwaggerUI url="/api/openapi.json" />;
};

export default OpenAPIPage;

--------------/server/routers/_app.ts---------------

import {mergeRouters, publicProcedure, router} from '../init';
import {userRouter} from "./user";
import {testRouter} from "./test";

export const appRouter = router({
    health: publicProcedure.query(() => 'ok'),
    user: userRouter,
    test: testRouter,
});

export type AppRouter = typeof appRouter;

-------------/server/routers/user.ts---------------

import {publicProcedure, router} from '../init';

import z from 'zod';
import {User} from "../models/User.model";

export const userRouter = router({
    listUsers: publicProcedure
        .meta({
        openapi:{
            method: 'GET',
            path: '/users/listUsers',
            tags: ['users'],
            summary: 'Read all users',
        }
    })
        .input(z.void())
        .output(z.array(z.any()))
        .query(async () => {
            console.log('listUsers');
            return User.find({});
        })
});

[jlalmes]

Lol you've shared everything except the testRouter where the error is occurring!

[dawoodaijaz97]

I have 2 routes, user and test. When i make request to to any route /api/* except api/trpc/ all the requests are going to test route.
In the image I shared the requested URL is /user/ListUsers but the request went to test Route.

Here is the code for the test route

import { publicProcedure, router } from '../init';
import z from "zod";
export const testRouter = router({
    testDBConnection: publicProcedure
        .meta({ openapi: { method: 'GET', path: '/testDBConnection' } })
        .input(z.object({ name: z.string()}).nullish())
        .query(() => {
        console.log('Test DB Connection');
    }),
});

Below is my folder setup for TRPC and Next routes

[jlalmes]

This testDBConnection procedure is causing the error - it is because your input parser can be null | undefined, but it must be an object. Please see the following possible change:

- .input(z.object({ name: z.string() }).nullish())
+ .input(z.object({ name: z.string().nullish() }))

[dawoodaijaz97]

Thanks @jlalmes
It worked.