Me gustaría saber cómo formatear correctamente una mutación de GraphQL que contiene un fragmento como un JSON válido en los datos de un formulario.
El esquema tiene un tipo de Comment que contiene un escalar de Upload .
import { GraphQLUpload } from 'graphql-upload'; const typeDefs = ` scalar Upload type Comment { text: String files: [Upload!] } ` const resolvers = { Upload: GraphQLUpload, };La mutación del cliente usando un fragmento es la siguiente:
// 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)} \ }`; } El uso de la mutación anterior producirá la estructura de datos del formulario a continuación. Esto está estructurado de acuerdo con graphql-multipart-spec .
------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--Los datos del formulario anterior generarán un error.
BadRequestError: Invalid JSON in the 'operations' multipart field (https://github.com/jaydenseric/graphql-multipart-request-spec). Como se ve en los datos del formulario, la parte de "operations" no es un JSON válido debido a la cadena de varias líneas.
Entonces, mi pregunta es cómo "imprimir" o formatear correctamente una mutación con un fragmento como se muestra a continuación:
{ "query":"mutation AddComment($text: String!, $files: [Upload!]) { comment: addComment(text: $text, files: $files) { ...Comment } } fragment Comment on Comment { text files }" }Para resolver esto, mueva JSON.stringify() a la ubicación adecuada.
// stringify entire operation instead of variables (only) const operation = JSON.stringify({ query: print(Mutation.addComment), variables: variables }); {"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]}}