How to access raw request body in handler? (rawInput from trpc)

[lazakrisz]

Hi!

This is truly an amazing library thanks so much for building it!

I've been trying to figure out how to get the raw request body in a handler. I'm currently using conform (https://github.com/edmundhung/conform) to manage my form state in Next.js. Previously I was using next-safe-action, where in a handler I can use the clientInput argument, or with trpc you can use the rawInput / getRawInput in order to get the raw body of a request. I've been trying to figure out how to do that with orpc. I need this since that is what I have to pass into conform's parsing function, ex.:

export const contactAction = os
  .input(zfd.formData({}))
  .output(
    z.object({
      result: z.custom<SubmissionResult<string[]>>(),
    }),
  )
  .handler(async ({ input,  }) => {
    
    const submission = parseWithZod(input, {}); // 👈 I'd like to be able to pass in the raw request's form data here.

    return {};
  })
  .actionable({});

In next-safe-action I can do:

actionClient.inputSchema(zfd.formData({})).stateAction<{
  conform: SubmissionResult<string[]>;
}>(async ({ clientInput }) => {
  /**
   * clientInput isFormData | FormDataLikeInput | { [x: string]: unknown; }
   */
  const submission = parseWithZod(clientInput as FormData, {
    schema: createLoginSchema(),
  });

  /// ....

  return {
    conform: submission.reply(),
  };
});

I looked at https://orpc.unnoq.com/docs/server-action#parseformdata-and-getissuemessage-utilities, but this as I gather would parse my form FormData into JSON and send that to an actionable handler.
I also looked at https://orpc.unnoq.com/docs/advanced/extend-body-parser#extend-body-parser, is it possible to append the body / the raw body using an extended body parser?
I also looked into using a middleware but as far as I understand it it is not possible to access the request in a middleware. Am I missing something? 😅

Thanks! 🙏

[dosubot[bot]]

Hi @lazakrisz! I'm Dosu and I’m helping the orpc team.

orpc doesn't have a built-in rawInput like trpc, but you can access the raw request body by customizing the body parser using adapterInterceptors and rootInterceptors. For Next.js, you must also disable the default body parser by setting bodyParser: false in your API route config.

Here's a minimal example using the Fetch adapter that injects the raw Request into the handler context and overrides the body extraction logic, so you can access FormData or the raw body as needed:

import { RPCHandler } from '@orpc/server/fetch'

const OVERRIDE_BODY_CONTEXT = Symbol('OVERRIDE_BODY_CONTEXT')

interface OverrideBodyContext {
  fetchRequest: Request
}

const handler = new RPCHandler(router, {
  adapterInterceptors: [
    (options) => options.next({
      ...options,
      context: {
        ...options.context,
        [OVERRIDE_BODY_CONTEXT as any]: {
          fetchRequest: options.request,
        },
      },
    }),
  ],
  rootInterceptors: [
    (options) => {
      const { fetchRequest } = (options.context as any)[OVERRIDE_BODY_CONTEXT] as OverrideBodyContext

      return options.next({
        ...options,
        request: {
          ...options.request,
          async body() {
            const contentType = fetchRequest.headers.get('content-type')
            if (contentType?.startsWith('multipart/form-data')) {
              return fetchRequest.formData()
            }
            // fallback to default body parser
            return options.request.body()
          },
        },
      })
    },
  ],
})

In your handler, you can then access the raw FormData and pass it to conform's parsing function.

For Next.js, remember to add:

export const config = {
  api: {
    bodyParser: false,
  },
}

References:

• orpc: extend body parser example
• orpc: Next.js adapter config

This approach gives you full control over how the raw body is handled and passed to your handler, similar to what you had with trpc's rawInput or next-safe-action's clientInput.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[unnoq]

If you pass FormData as input when calling server action, the input will be form-data

export const getting = pub
  .input(z.instanceof(FormData))
  .handler(async ({ input }) => {
    console.log({ input })
    // return `Hello ${input.name}!`
  })
  .actionable()

In other word, the input is whatever you pass when calling (make sure nextjs support transfer it)

[lazakrisz]

Oh I can't believe I've missed that 🤦‍♂️ , 😅, thank you so much!