cc•11h ago

@trpc/client vanilla client not appending formdata data to the request/payload

server end works fine as i tested it with curl and everything went smoothly but when using @trpc/client package to make vanilla client and then doing a mutation like this

const fd = new FormData();
fd.set('image', form.image, form.image.name);
await api.upload.mutate(fd);

const fd = new FormData();
fd.set('image', form.image, form.image.name);
await api.upload.mutate(fd);

does not work, in request/payload it's just {} an empty object. my vanilla client looks like this

createTRPCClient<AppRouter>({
    links: [
      httpBatchLink({
        url: 'http://localhost:4000/trpc',
        headers: {
          ...headers,
          'Content-Type': 'multipart/form-data',
        },
        fetch(url, options) {
          return fetch(url, {
            headers: {
              ...headers,
              'Content-Type': 'multipart/form-data',
            },
            ...options,
            credentials: 'include',
          });
        },
      }),
    ],
  });
};

createTRPCClient<AppRouter>({
    links: [
      httpBatchLink({
        url: 'http://localhost:4000/trpc',
        headers: {
          ...headers,
          'Content-Type': 'multipart/form-data',
        },
        fetch(url, options) {
          return fetch(url, {
            headers: {
              ...headers,
              'Content-Type': 'multipart/form-data',
            },
            ...options,
            credentials: 'include',
          });
        },
      }),
    ],
  });
};

i added content-type as u can see too but that didn't help at all.

Solution:

okay i figured it out the problem is httpBatchLink switching to httpLink works all fine.

Jump to solution

5 Replies

kaledoesit•9h ago

I believe tRPC only supports a content-type of "application/json"

ccOP•8h ago

why would it not support it when they have docs for formdata and the actual server end parses it on its own?

kaledoesit•8h ago

Sorry I didn't see that before. Not sure if this helps: https://github.com/trpc/trpc/tree/next/examples/minimal-content-types

GitHub

trpc/examples/minimal-content-types at next · trpc/trpc

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc

ccOP•8h ago

i've looked at this before and it's using react, i'm using the vanilla client, i'm assuming something's wrong with vanilla one as it's not attaching form data on the client side as the server end is completely working

Solution

cc•8h ago

okay i figured it out the problem is httpBatchLink switching to httpLink works all fine.

@trpc/client vanilla client not appending formdata data to the request/payload

Did you find this page helpful?