Jan Henning Comments

Jan Henning

Posts Comments

TtRPC

•Created by Jan Henning on 10/28/2023 in #❓-help

`refetchOnWindowFocus` with RSC?

Thank you!

4 replies

TtRPC

•Created by Jan Henning on 10/28/2023 in #❓-help

`refetchOnWindowFocus` with RSC?

Yeah, I think I may have been a bit tired last night 😂 I'll just convert to fetching on client to give me a bit more control

4 replies

TtRPC

•Created by koko#1337 on 5/26/2023 in #❓-help

TRPCClientError: fetch failed

This thread is one of the top results when googling for UND_ERR_REQ_CONTENT_LENGTH_MISMATCH, so thought I'd add my fix to this as I recently encountered it myself. Using Next.js app router.

"next": "^13.5.6",
"@trpc/client": "^10.41.0",
"@trpc/next": "^10.41.0",
"@trpc/react-query": "^10.41.0",
"@trpc/server": "^10.41.0"

"next": "^13.5.6",
"@trpc/client": "^10.41.0",
"@trpc/next": "^10.41.0",
"@trpc/react-query": "^10.41.0",
"@trpc/server": "^10.41.0"

First, install fetch-ponyfill.

yarn add fetch-ponyfill

yarn add fetch-ponyfill

Then update your httpBatchStreamLink by adding fetch: fetchPonyfill().fetch.

// trpc/server.ts
import fetchPonyfill from "fetch-ponyfill"

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: op =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error)
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      fetch: fetchPonyfill().fetch, // <= add this line
      headers() {
        const heads = new Map(headers())
        heads.set("x-trpc-source", "rsc")
        return Object.fromEntries(heads)
      }
    })
  ]
})

// trpc/server.ts
import fetchPonyfill from "fetch-ponyfill"

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: op =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error)
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      fetch: fetchPonyfill().fetch, // <= add this line
      headers() {
        const heads = new Map(headers())
        heads.set("x-trpc-source", "rsc")
        return Object.fromEntries(heads)
      }
    })
  ]
})

This solved the issue for me. Hopefully this is resolved in the future and will no longer be necessary to ponyfill.

2 replies

TtRPC

•Created by Grifn on 7/17/2023 in #❓-help

Next.js app router catch-all HTTP methods

Hi. You can create a handler function and export it as both GET and POST. For example, here's how mine looks. Yours may look different, but the same thing applies to how you can export it 🙂

import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
import { appRouter } from "~/server/routers/_app"
import { createContext } from "~/server/trpc"

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext
  })

export { handler as GET, handler as POST }

import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
import { appRouter } from "~/server/routers/_app"
import { createContext } from "~/server/trpc"

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext
  })

export { handler as GET, handler as POST }

4 replies