Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

161
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda