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:

trpc-playground/packages/trpc-playground/src/get-default-input.ts

Line 28 in be69c41

.filter(([, { _def }]) => _def.query || _def.mutation)

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/

[email protected]

[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?

[LeulAria]

any chance ?

[ImSingee]

I created a PR for this (#61).

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