behaved Comments

behaved

•Created by behaved on 2/25/2025 in #❓-help

operation input is formdata but trpc makes it an application/json POST call

I found a fix to my issue: superjson transformer somewhat did not work in nextjs v15 app router, though it worked on v14 pages router working code:

splitLink({
          condition: op => isNonJsonSerializable(op.input),
          true: httpLink({
            url: getUrl(),
            transformer: new FormDataTransformer(),
          }),
          false: httpBatchLink({
            url: getUrl(),
            transformer: superjson,
          }),
        }),

interface DataTransformer {
  serialize: (object: any) => any
  deserialize: (object: any) => any
}

export class FormDataTransformer implements DataTransformer {
  serialize(object: any) {
    if (!(object instanceof FormData)) {
      throw new Error('Expected FormData')
    }

    return object
  }

  deserialize(object: any) {
    return object as JSON
  }
}

splitLink({
          condition: op => isNonJsonSerializable(op.input),
          true: httpLink({
            url: getUrl(),
            transformer: new FormDataTransformer(),
          }),
          false: httpBatchLink({
            url: getUrl(),
            transformer: superjson,
          }),
        }),

interface DataTransformer {
  serialize: (object: any) => any
  deserialize: (object: any) => any
}

export class FormDataTransformer implements DataTransformer {
  serialize(object: any) {
    if (!(object instanceof FormData)) {
      throw new Error('Expected FormData')
    }

    return object
  }

  deserialize(object: any) {
    return object as JSON
  }
}

Shoutout to this repo, that I found my solution https://github.com/juliangra/trpc-next-formdata-app-router

5 replies