Add a Docker Playground

[perfectbase]

Would it be possible to add a Dockerized version of the playground? One that people could run without the need to import the appRouter to setup the playground?

I believe that to make it possible, we would need a way to get the router configuration from the trpc endpoint.

Does that functionality already exist? If not, would it be possible to sync with the trpc team and make it?

I love this project, and I think its super important for the trpc community. I would love to help contributing.

[sachinraja]

I am a tRPC core maintainer so I could try to make that happen if it were possible. Unfortunately, routers are not portable. Resolvers can import from anywhere and run anything. What you can do is use the playground with an express server and bundle your code.

[perfectbase]

@sachinraja Yeah.. I think you are right... If we had a way to print the router configuration on a specific endpoint, we maybe could be able to use that for setting up the playground, but we can't print the AppRouter interface, since interfaces don't exist in runtime.

I tried to print out the actual appRouter object to see if we could use it as a schema for the playground, but it doesn't seem like an easy task.

// console.log(JSON.stringify(appRouter, null,2))
{
  "_def": {
    "queries": {
      "test.hello": {
        "middlewares": [],
        "inputParser": {
          "_def": {
            "innerType": {
              "_def": {
                "innerType": {
                  "_def": {
                    "unknownKeys": "strip",
                    "catchall": {
                      "_def": {
                        "typeName": "ZodNever"
                      }
                    },
                    "typeName": "ZodObject"
                  },
                  "_cached": null
                },
                "typeName": "ZodOptional"
              }
            },
            "typeName": "ZodNullable"
          }
        }
      }
    },
    "mutations": {},
    "subscriptions": {},
    "middlewares": [],
    "transformer": {
      "input": {},
      "output": {}
    }
  }
}

I really think it would be a great feature to be able to run the Playground on docker by only setting the API endpoint as an environment variable. But, sadly, it doesn't feel like a trivial solution..

[perfectbase]

I'm starting to understand more the codebase. And I realized that you already have an API that is returning the "schema" of the trpc.

// POST: http://localhost:3000/api/trpc-playground
["declare function query<QueryName extends 'hello' | 'hello_num' | 'subtract_nums' | 'add_nums' | 'no-args' | 'date'>(name: QueryName,...args: QueryName extends 'hello' ? [({\n    text: (string | undefined) | null;\n} | undefined) | null] : QueryName extends 'hello_num' ? [({\n    text: number;\n} | undefined) | null] : QueryName extends 'subtract_nums' ? [{\n    a: number;\n    b: number;\n}] : QueryName extends 'add_nums' ? [{\n    a: number;\n    b: number;\n}] : QueryName extends 'no-args' ? [undefined?] : QueryName extends 'date' ? [Date] : never): void","declare function mutation<QueryName extends 'delete_last_user'>(name: QueryName,...args: QueryName extends 'delete_last_user' ? [undefined?] : never): void"]

Couldn't we put this inside the main trpc repo? For example: POST: /api/trpc/_schema

I believe that if we could do that, people would be able to run the dockerized playground without having to make any changes to the code.

What do you think?

[sachinraja]

I don't think we'll be doing anything like that in core. But we can potentially offer an option to pass that "schema" instead of your router in this project.