MadaShindeInai•2mo ago

Error: Error serializing `.trpcState.json.queries[3].promise` returned from `getStaticProps`

Hello! Doing a migration from v10 to v11 in T3 based app. It worth to mention that the same code works with no issues on v10. Migration process went pretty well and I'm able to run the app localy. However during build I'm start facing such errors (pic 1) I'm trying to debug that, but surprisingly that happens not every build. (pic2) I'm using pretty standart setup and don't see any reasons that may cause that in change logs. (pic3) gSP queries also look quite normal and correspond to the examples in the documentation (pic4) Maybe someone has experienced this before? Maybe I missed something when migrating? Maybe someone has an idea what's wrong? I would be glad to get your advice. Let me know if you need more details of my setup.

12 Replies

MadaShindeInaiOP•2mo ago

I also double checked all chains from the "await prefetchHelper." up to prisma query, and can confirm that all async / await declarations are in place and defined explicitly. And really helper.dyhydrate() returns promise like data mixed with real responses. (I removed real one).

{
  "json": {
    "mutations": [],
    "queries": [
      {
        "state": {
          "data": null,
          "dataUpdateCount": 0,
          "dataUpdatedAt": 0,
          "error": null,
          "errorUpdateCount": 0,
          "errorUpdatedAt": 0,
          "fetchFailureCount": 0,
          "fetchFailureReason": null,
          "fetchMeta": null,
          "isInvalidated": false,
          "status": "pending",
          "fetchStatus": "fetching"
        },
        "queryKey": [
          [
            "questions",
            "getQuestionBySlug"
          ],
          {
            "input": {
              "slug": "title2036261-ZB86Y"
            },
            "type": "query"
          }
        ],
        "queryHash": "[[\"questions\",\"getQuestionBySlug\"],{\"input\":{\"slug\":\"title2036261-ZB86Y\"},\"type\":\"query\"}]",
        "promise": {}
      },
    ]
  },
  "meta": {
    "values": {
      "queries.0.state.data": [
        "undefined"
      ],
    }
  }
}

{
  "json": {
    "mutations": [],
    "queries": [
      {
        "state": {
          "data": null,
          "dataUpdateCount": 0,
          "dataUpdatedAt": 0,
          "error": null,
          "errorUpdateCount": 0,
          "errorUpdatedAt": 0,
          "fetchFailureCount": 0,
          "fetchFailureReason": null,
          "fetchMeta": null,
          "isInvalidated": false,
          "status": "pending",
          "fetchStatus": "fetching"
        },
        "queryKey": [
          [
            "questions",
            "getQuestionBySlug"
          ],
          {
            "input": {
              "slug": "title2036261-ZB86Y"
            },
            "type": "query"
          }
        ],
        "queryHash": "[[\"questions\",\"getQuestionBySlug\"],{\"input\":{\"slug\":\"title2036261-ZB86Y\"},\"type\":\"query\"}]",
        "promise": {}
      },
    ]
  },
  "meta": {
    "values": {
      "queries.0.state.data": [
        "undefined"
      ],
    }
  }
}

MadaShindeInaiOP•2mo ago

And logging v10 requests I see no queries with pending statuses at all...

MadaShindeInaiOP•2mo ago

Uh, almost forgot, Package versions: "@tanstack/react-query": "5.66.0", "@trpc/client": "11.0.0-rc.730", "@trpc/next": "11.0.0-rc.730", "@trpc/react-query": "11.0.0-rc.730", "@trpc/server": "11.0.0-rc.730",

Alex / KATT 🐱•2mo ago

no type errors?

MadaShindeInaiOP•2mo ago

No type errors. From the types/linters side, everything is ok. typescript latest, eslint 9.19 UPD. tRPC v474 gives the same errors. :trpc:

Alex / KATT 🐱•2mo ago

can you build a reproduction? should be fairly simple using https://github.com/trpc/examples-next-minimal-starter just fork that

MadaShindeInaiOP•2mo ago

Hi. Trouble is, as I said earlier, I can't do stable reproduction. (I tried!) Even in current project, if I remove unnecessary routes, leaving only the ones that crashed with an error before and build again - build goes fine. But increasing the number of routes - the errors start dropping again. However, I can send an invite to the repository where this happens, and share environment variables in DM. Would that work? 768 same thing

MadaShindeInaiOP•2mo ago

802 the same issue 😐 UPD. trpcState: JSON.stringify(prefetchHelper.dehydrate()), that helped to prevent build failures (not sure about data I get yet). One more thing, is that it appeared that issue happens only in case of Dependant queries.

MadaShindeInaiOP•2mo ago

Ready! https://github.com/MadaShindeInai/trpcreactqueryissuerepro/tree/main

GitHub

GitHub - MadaShindeInai/trpcreactqueryissuerepro

Contribute to MadaShindeInai/trpcreactqueryissuerepro development by creating an account on GitHub.

Alex / KATT 🐱•2mo ago

please post an isue on github and link to it, we'll look at it asap

MadaShindeInaiOP•2mo ago

Ready! Thank you! https://github.com/trpc/trpc/issues/6558

GitHub

bug: Serialization issues on dependant queries (NextJS) · Issue #65...

Provide environment information System: OS: macOS 15.3.1 CPU: (8) arm64 Apple M1 Memory: 2.35 GB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node np...

Error: Error serializing `.trpcState.json.queries[3].promise` returned from `getStaticProps`

Did you find this page helpful?