Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormData in a POST request #240

Open
thekevinscott opened this issue Dec 27, 2019 · 1 comment
Open

FormData in a POST request #240

thekevinscott opened this issue Dec 27, 2019 · 1 comment
Labels
enhancement💡 feature Feature: new addition or enhancement to existing solutions

Comments

@thekevinscott
Copy link

Hi! I'm trying to POST against a REST endpoint that uploads a file as part of a FormData object. From what I can tell, apollo-link-rest transforms FormData objects into {} prior to sending.

There's a few issues somewhat similar (like this) but the resolutions don't seem to work for me.

From what I can tell, this particular bit destroys an incoming FormData object and returns a blank object ({}). If I change line 615 like so:

// FileList/File are only available in some browser contexts
  // Notably: *not available* in react-native.
  if (
    ((global as any).FileList && object instanceof FileList) ||
    ((global as any).File && object instanceof File) ||
    object instanceof FormData) // <----- new line
  ) {
    // Object is a FileList or File object => no keys to convert!
    return object;
  }

With the following gql:

mutation UpdateDocument(
  $payload: any!
) {
  updateDocument(payload: $payload) @rest(
    type: "File"
    path: "/documents"
    method: "POST"
    bodyKey: "payload"
    bodySerializer: $transform,
  ) {
    NoResponse
  }
}

And the following JS:

import UPLOAD_DOCUMENT from './updateDocument.gql';

...

const [uploadDocument] = useMutation(UPLOAD_DOCUMENT);

const payload = new FormData();
payload.append('file', file, file.name);
uploadDocument({
  variables: {
    payload,
    // we need the transform function to again prevent `body` from turning into a `{}`
    transform: (body: FormData, headers: Headers) => ({
      body,
      headers,
    }),
  },
});

Then things appear to work fine. But I'm not sure if I'm missing something key here - there doesn't seem to be much documentation around file uploads (I notice you ask in the other issue for help providing documentation - I'd be happy to if I understood what to do!)

@fbartho
Copy link
Collaborator

fbartho commented Jan 5, 2022

We added FileList/File support in #164 v0.7.2 and there's more additions for ArrayBuffer/Blob support, so this is probably similar to those issues.

I've mostly used apollo-link-rest in react-native which doesn't support FormData/File objects so I don't have much experience with how painful this is!

Feel free to open a PR if you figure out how to fix it!

@fbartho fbartho added enhancement💡 feature Feature: new addition or enhancement to existing solutions labels Jan 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement💡 feature Feature: new addition or enhancement to existing solutions
Projects
None yet
Development

No branches or pull requests

2 participants