Format a GraphQL mutation with fragment in a Form Data

Question

I would like to know how to properly format a GraphQL mutation containing a fragment as a valid JSON in a form data.

Background

The schema has a type Comment containing an Upload scalar.

import { GraphQLUpload } from 'graphql-upload';

const typeDefs = `
  scalar Upload

  type Comment {
    text: String
    files: [Upload!]
  }
`

const resolvers = {
  Upload: GraphQLUpload,
};

The client mutation using a fragment is as follows:

// mutation.js
export const Comment = gql`
  fragment Comment on Comment {
    text
    files
  }
`;

export const addComment = gql`
  mutation AddComment($text: String!, $files: [Upload!]) {
    comment: addComment(text: $text, files: $files) {
      ...Comment
    }
    ${Comment}
  }
`

// saga.js
import { print } from "graphql";

function addComment() {
    // ...
    const operation = `{ \
      "query": "${print(Mutation.addComment)}", \
      "variables": \
        ${JSON.stringify(variables)}
      \
    }`;
}

Using the mutation above will yield the form data structure below. This is structured according to the graphql-multipart-spec .

Form Data

------WebKitFormBoundaryxwxfmamlvsNq5eL1
Content-Disposition: form-data; name="operations"

{       "query": "mutation AddComment($text: String!, $files: [Upload!]) {  comment: addComment(text: $text, files: $files) {
    ...Comment
  }
}

fragment Comment on Comment {
  text
  files
}
",       "variables":         {"text":"Lorem Ipsum","files":[]}
         }
------WebKitFormBoundaryxwxfmamlvsNq5eL1
Content-Disposition: form-data; name="map"

{}
------WebKitFormBoundaryxwxfmamlvsNq5eL1--

The form data above will generate an error

BadRequestError: Invalid JSON in the ‘operations’ multipart field (https://github.com/jaydenseric/graphql-multipart-request-spec).

As seen in the form data, the "operations" part is not a valid JSON due to the multi-line string.

So my question is, how to properly "print" or format a mutation with a fragment as shown below:

{
   "query":"mutation AddComment($text: String!, $files: [Upload!]) {  comment: addComment(text: $text, files: $files) {  ...Comment } } fragment Comment on Comment { text files }"
}

Answer 1

To solve this is to move JSON.stringify() in the proper location.

// stringify entire operation instead of variables (only)
const operation = JSON.stringify({
  query: print(Mutation.addComment),
  variables: variables
});

Form Data (output)

{"query":"mutation AddComment($text: String!, $files: [Upload!]) {\n  comment: addComment(text: $text, files: $files) {\n    ...Comment\n  }\n}\n\nfragment Comment on Comment {\n  text\n  files\n}\n","variables":{"text":"Lorem Ipsum","files":[null]}}