Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

172
Vistas
Format a GraphQL mutation with fragment in a Form Data

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 }"
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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]}}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda