Relay Modern BadRequestError: Missing multipart field ‘operations’

Question

I am trying to upload file to my server. using Altair i can do it without any error but when i use Relay.js for uploading it server throws following error.

BadRequestError: Missing multipart field ‘operations’ (https://github.com/jaydenseric/graphql-multipart-request-spec).
at Busboy.<anonymous> (/home/dotsinspace/Documents/dev/truck.pe__server/node_modules/.pnpm/graphql-upload@9.0.0_graphql@15.3.0/node_modules/graphql-upload/processRequest.js:362:11)
at Object.onceWrapper (events.js:420:28)
at Busboy.emit (events.js:326:22)
at Busboy.EventEmitter.emit (domain.js:486:12)
at Busboy.emit (/home/dotsinspace/Documents/dev/truck.pe__server/node_modules/.pnpm/busboy@0.3.1/node_modules/busboy/lib/main.js:37:33)
at /home/dotsinspace/Documents/dev/truck.pe__server/node_modules/.pnpm/busboy@0.3.1/node_modules/busboy/lib/types/multipart.js:52:13
at processTicksAndRejections (internal/process/task_queues.js:75:11)

Following are my graphql code and mutation which i am trying to commit.

#Graphql

graphql`
mutation AccountUploadMutation($profilePicture: Image!) {
    AccountUpload(profilePicture: $profilePicture) {
        message,
        status
    }
}

`

#Mutation

commitMutation(Environment, {
'mutation': AccountUploadMutation,
'variables': { 'profilePicture': v },
'uploadables': { 'file': v },
'onCompleted': (response, error) => Response({}, { response, error })

})

and I am totally confused about uploading part to..in uploadables you have to provide file..but my server looks for variable with profilePicture as image how can i deal with it.

Dmitry Minkovsky · Answer 1 · 2020-11-06T13:32:37.300

It looks like you have an issue the multipart parsing configuration in your backend.

My guess is that the Relay Network is sending your GraphQL query in the mutlipart field "operation", but your backend is looking for the field "operations" (plural). To fix the error, confirm that your Network is sending the query in the operations field, or change your backend to read whatever field it's actually being sent on.

Another possibility is you're not sending your query in the multipart format at all. If you followed the Network documentation's example for sending your request, then you are just sending a JSON object, not a multipart form:

// Example from Relay docs. Sends a JSON object, not a multipart
// form as expected by your backend

function fetchQuery(
  operation,
  variables,
  cacheConfig,
  uploadables,
) {
  return fetch('/graphql', {
    method: 'POST',
    headers: {
      // Add authentication and other headers here
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables,
    }),
  }).then(response => {
    return response.json();
  });
}

// Create a network layer from the fetch function
const network = Network.create(fetchQuery);

If this is the case, write your fetchQuery function to fetch data using a multipart form. See this example: fetch post with multipart form data

Ok...Now i have checked my query and relay is sending request in operation field as you said in 1st point now my server is graphql-yoga server which has graphql-upload inbuilt and it can handle upload by default if i use altair or apollo client for same it works only relay is there which is causing error. — Rekha, Nov 08 '20 at 17:06
Sorry not sure what you mean. Are you doing multipart form uploads? — Dmitry Minkovsky, Nov 08 '20 at 18:02
Dimitry I did some work around get file upload working. now its working but there is one problem. RN is uploading file in object format which contains. which is something like this. { 'fileName': Promise{ }... } but after doing PromiseAll(UploadedObject) all object value are null...and second its a workaround but i still need my uploaded multipart object to be in createReadStream form..not regular object. which is uploaded to server — Rekha, Nov 13 '20 at 03:24

Relay Modern BadRequestError: Missing multipart field ‘operations’

1 Answers1