Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Badrequest using superjson transformer

See original GitHub issue

Hi,

I have a very simple app that I am testing:

import * as trpc from '@trpc/server'
import superjson from 'superjson'
import { z } from 'zod'

const appRouter = trpc
  .router()
  .transformer(superjson)
  .mutation('hello', {
    input: z.string(),
    resolve({ input }) {
      console.log(input)

      return { input }
    }
  })

export type AppRouter = typeof appRouter

// http server
const { listen } = trpc.createHttpServer({
  router: appRouter,
  createContext: () => ({})
})

listen(5050)

when I call this endpoint with:

=> http POST 'localhost:5050/hello' input=asdasd                                                                                                                                    
HTTP/1.1 400 Bad Request
Connection: keep-alive
Content-Length: 1735
Content-Type: application/json
Date: Wed, 04 Aug 2021 07:41:14 GMT
Keep-Alive: timeout=5

{
    "error": {
        "json": {
            "code": -32600,
            "data": {
                "code": "BAD_REQUEST",
                "path": "hello",
                "stack": "TRPCError: [\n  {\n    \"code\": \"invalid_type\",\n    \"expected\": \"string\",\n    \"received\": \"undefined\",\n    \"path\": [],\n    \"message\": \"Required\"\n  }\n]\n    at ProcedureWithInput.parseInput (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:46:13)\n    at /home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:62:21\n    at Array.<anonymous> (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:66:20)\n    at ProcedureWithInput.call (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:71:36)\n    at Router.call (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:295:22)\n    at Object.mutation (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/router-efe6cf32.cjs.dev.js:309:21)\n    at Object.callProcedure (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/callProcedure-dfe3505e.cjs.dev.js:57:19)\n    at /home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/index-5eec7158.cjs.dev.js:239:44\n    at Array.map (<anonymous>)\n    at Object.requestHandler (/home/bobby/Projects/neurocode/ts-micro-template/node_modules/@trpc/server/dist/index-5eec7158.cjs.dev.js:235:45)"
            },
            "message": "[\n  {\n    \"code\": \"invalid_type\",\n    \"expected\": \"string\",\n    \"received\": \"undefined\",\n    \"path\": [],\n    \"message\": \"Required\"\n  }\n]"
        }
    },
    "id": null
}

If I remove the transfomer(superjson) from the server it works as expected:

=> http POST 'localhost:5050/hello' input=asdasd                                                                                                                                    
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 62
Content-Type: application/json
Date: Wed, 04 Aug 2021 07:42:23 GMT
Keep-Alive: timeout=5

{
    "id": null,
    "result": {
        "data": {
            "input": "asdasd"
        },
        "type": "data"
    }
}

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

donchev7commented, Aug 4, 2021

But nevermind, superjson is the problem here you are right. Even on a passthorugh:

const appRouter = trpc
  .router()
  .transformer(superjson)
  .mutation('hello', {
    input: (v) => v,
    resolve(input) {
      console.log(input)

      return { input }
    }
  })

I can see:

{
type: 'mutation',
ctx: {},
path: 'hello',
rawInput: undefined,
input: undefined
}

0reactions

github-actions[bot]commented, Oct 5, 2022

This issue has been locked because it had no new activity for 14 days. If you are running into a similar issue, please create a new issue. Thank you.

Top Results From Across the Web

transformer.ts - blitz-js/superjson

Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more. - superjson/transformer.ts at main ...

Data Transformers

The transformers need to be added both to the server and the client. Using superjson. SuperJSON allows us to transparently use, e.g., standard...

superjson

Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more. All Contributors npm Language grade: JavaScript CI ...

SuperJSON - JSON on steroids | simonknott.de

SuperJSON is a high-fidelity replacement to JSON.stringify.It supports data types like Date, RegExp, Map, Set etc., preserves referential ...

superjson examples

Learn how to use superjson by viewing and forking superjson example apps on CodeSandbox.