cc Posts - tRPC

•Created by cc on 1/17/2025 in #❓-help

@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.

8 replies