V11 support

[omarkhatibco]

Hi,

I'm using the playground with the latest trpc version 11, now it's working fine expect that I get no autocomplete even the docs are empty

it seems the function getRouterSchema unable to get the types.

I'm using it with a test server based on fastify

[andrewgeorgemitchell]

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: https://github.com/sachinraja/trpc-playground/blob/be69c4143971b9d42e183ba277cc5ddea632e620/packages/trpc-playground/src/get-default-input.ts#L28

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.

[omarkhatibco]

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

[omarkhatibco]

@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/

trpc-playground@1.0.4.patch

[ax-at]

@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!

[jonathanwilke]

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