Hey 👋 I was running into this too, so I fixed it by tracking down the issues in the zodResolveTypes function, the issue is some breaking changes that tRPC made in v11, I went ahead and fixed them and published a gist with the updated zodResolveTypes function:

https://gist.github.com/andrewgeorgemitchell/33f3a97ce3d4d8312b71834a940091d8

To use this just copy this gist into a file in your repo for example trpc-playground-fix.ts

And then update your tRPC playground route handler like this:

import type { NextApiHandler } from 'next'
import { zodResolveTypes } from './trpc-playground-fix' // 👈 Import zodResolveTypes from gist file
import { nextHandler } from 'trpc-playground/handlers/next'

import { appRouter } from 'api'

const setupHandler = nextHandler({
  router: appRouter,
  // tRPC api path, pages/api/trpc/[trpc].ts in this case
  trpcApiEndpoint: '/api/trpc',
  playgroundEndpoint: '/api/trpc-playground',
  resolveTypes: zodResolveTypes, // 👈 Pass in the updated zodResolveTypes function with the fixes to resolveTypes option
  request: {
    superjson: true,
  },
})

const handler: NextApiHandler = async (req, res) => {
  const playgroundHandler = await setupHandler
  await playgroundHandler(req, res)
}

export default handler

@sachinraja FWIW the issue is that _def.query and _def.mutation are now replaced by a _def.type field which can be 'query' | 'mutation' | 'subscription'

All my version of the zodResolveTypes function does is go to a few files and update lines like this:

To:
.filter(([, { _def }]) => _def.type === 'query' || _def.type === 'mutation')

Totally understand if you don't want to fix this until tRPC v11 is actually done, but I'm also down to help get a canary/next version up for trpc-playground that fixes this issue in the package in a non janky way.

@andrewgeorgemitchell thank you for the fix, I will check it

@andrewgeorgemitchell I just convert your changes to a patch file for pnpm

if you want to use it with patch package replace a/ and b/ with a/trpc-playground/ and b/trpc-playground/

[email protected]

@omarkhatibco I think this patch is missing one change from @andrewgeorgemitchell's gist for these two lines having if else condition:

In the patch, instead of the below code:

    if (procedure._def?.query)
      procedureTypeDef += `query: (${inputType}) => void,`;
    else if (procedure._def?.mutation)
      procedureTypeDef += `mutate: (${inputType}) => void,`;

it should be like this:

    if (procedure._def?.type === 'query')
      procedureTypeDef += `query: (${inputType}) => void,`;
    else if (procedure._def?.type === 'mutation')
      procedureTypeDef += `mutate: (${inputType}) => void,`;

And it will need to be changed in all dist/handlers files.

Due to this missing change, all the types in "trpc-playground" could not identify query and mutate method calls along with their parameters. As shown in the attached screencast below:
Screencast

Please check!

Any chance we could get this fix merged into the core?

any chance ?

I created a PR for this (#61).

Use this patch if you want to use trpc-playground on trpc v11:
[email protected]