Apollo-Client-Server zu Server-Mutation verursacht Fehler (Abfrage ok)

Question

Ich verwende Apollo-Client auf meinem Webserver, um mit meinem Graphql-Server (auch Apollo) zu kommunizieren. Ich habe eine erfolgreiche Abfrage arbeiten und Daten richtig abrufen, aber wenn ich eine Mutation versuche, bekomme ich new ApolloError Nachrichten. Die gleiche Mutation kopiert/eingefügt in graphiql funktioniert perfekt.

Ich habe CORS auf meinem graphql-Server überprüft und es ist aktiviert und funktioniert ordnungsgemäß. Ich habe meine Mutation buchstäblich kopiert und in meinen graphiql-Editor eingefügt, und es funktioniert wie erwartet.

kann jemand etwas Licht auf dieses für mich werfen, oder mich anweisen, wie ich mehr Informationen auf meinem graphql-Server über WARUM sehe ich einen 400 Fehler erhalte?

hier ist der apollo Fehler

{ 
    "graphQLErrors": [], 
    "networkError": { 
    "response": { 
     "url": "http://localhost:9000/api/private", 
     "status": 400, 
     "statusText": "Bad Request", 
     "headers": { 
     "_headers": { 
      "x-powered-by": [ 
      "Express" 
      ], 
      "access-control-allow-origin": [ 
      "*" 
      ], 
      "content-type": [ 
      "application/json" 
      ], 
      "date": [ 
      "Wed, 22 Mar 2017 05:36:21 GMT" 
      ], 
      "connection": [ 
      "close" 
      ], 
      "transfer-encoding": [ 
      "chunked" 
      ] 
     } 
     }, 
     "ok": false, 
     "body": { 
     "_readableState": { 
      "objectMode": false, 
      "highWaterMark": 16384, 
      "buffer": { 
      "head": { 
       "data": { 
       "type": "Buffer", 
       "data": [ 
        123, 
        34, 
        101, 
        114, 
        114, 
        111, 
        114, 
        115, 
        34, 
        58, 
        91, 
        123, 
        34, 
        109, 
        101, 
        115, 
        115, 
        97, 
        103, 
        101, 
        34, 
        58, 
        34, 
        67, 
        97, 
        110, 
        110, 
        111, 
        116, 
        32, 
        113, 
        117, 
        101, 
        114, 
        121, 
        32, 
        102, 
        105, 
        101, 
        108, 
        100, 
        32, 
        92, 
        34, 
        116, 
        111, 
        107, 
        101, 
        110, 
        92, 
        34, 
        32, 
        111, 
        110, 
        32, 
        116, 
        121, 
        112, 
        101, 
        32, 
        92, 
        34, 
        85, 
        115, 
        101, 
        114, 
        83, 
        101, 
        114, 
        118, 
        105, 
        99, 
        101, 
        115, 
        92, 
        34, 
        46, 
        34, 
        44, 
        34, 
        108, 
        111, 
        99, 
        97, 
        116, 
        105, 
        111, 
        110, 
        115, 
        34, 
        58, 
        91, 
        123, 
        34, 
        108, 
        105, 
        110, 
        101, 
        34, 
        58, 
        57, 
        44, 
        34, 
        99, 
        111, 
        108, 
        117, 
        109, 
        110, 
        34, 
        58, 
        55, 
        125, 
        93, 
        125, 
        93, 
        125 
       ] 
       }, 
       "next": null 
      }, 
      "tail": { 
       "data": { 
       "type": "Buffer", 
       "data": [ 
        123, 
        34, 
        101, 
        114, 
        114, 
        111, 
        114, 
        115, 
        34, 
        58, 
        91, 
        123, 
        34, 
        109, 
        101, 
        115, 
        115, 
        97, 
        103, 
        101, 
        34, 
        58, 
        34, 
        67, 
        97, 
        110, 
        110, 
        111, 
        116, 
        32, 
        113, 
        117, 
        101, 
        114, 
        121, 
        32, 
        102, 
        105, 
        101, 
        108, 
        100, 
        32, 
        92, 
        34, 
        116, 
        111, 
        107, 
        101, 
        110, 
        92, 
        34, 
        32, 
        111, 
        110, 
        32, 
        116, 
        121, 
        112, 
        101, 
        32, 
        92, 
        34, 
        85, 
        115, 
        101, 
        114, 
        83, 
        101, 
        114, 
        118, 
        105, 
        99, 
        101, 
        115, 
        92, 
        34, 
        46, 
        34, 
        44, 
        34, 
        108, 
        111, 
        99, 
        97, 
        116, 
        105, 
        111, 
        110, 
        115, 
        34, 
        58, 
        91, 
        123, 
        34, 
        108, 
        105, 
        110, 
        101, 
        34, 
        58, 
        57, 
        44, 
        34, 
        99, 
        111, 
        108, 
        117, 
        109, 
        110, 
        34, 
        58, 
        55, 
        125, 
        93, 
        125, 
        93, 
        125 
       ] 
       }, 
       "next": null 
      }, 
      "length": 1 
      }, 
      "length": 117, 
      "pipes": null, 
      "pipesCount": 0, 
      "flowing": null, 
      "ended": false, 
      "endEmitted": false, 
      "reading": true, 
      "sync": false, 
      "needReadable": true, 
      "emittedReadable": true, 
      "readableListening": false, 
      "resumeScheduled": false, 
      "defaultEncoding": "utf8", 
      "ranOut": false, 
      "awaitDrain": 0, 
      "readingMore": false, 
      "decoder": null, 
      "encoding": null 
     }, 
     "readable": true, 
     "domain": null, 
     "_events": {}, 
     "_eventsCount": 7, 
     "_writableState": { 
      "objectMode": false, 
      "highWaterMark": 16384, 
      "needDrain": false, 
      "ending": false, 
      "ended": false, 
      "finished": false, 
      "decodeStrings": true, 
      "defaultEncoding": "utf8", 
      "length": 0, 
      "writing": false, 
      "corked": 0, 
      "sync": false, 
      "bufferProcessing": false, 
      "writecb": null, 
      "writelen": 0, 
      "bufferedRequest": null, 
      "lastBufferedRequest": null, 
      "pendingcb": 0, 
      "prefinished": false, 
      "errorEmitted": false, 
      "bufferedRequestCount": 0, 
      "corkedRequestsFree": { 
      "next": null, 
      "entry": null 
      } 
     }, 
     "writable": true, 
     "allowHalfOpen": true, 
     "_transformState": { 
      "needTransform": true, 
      "transforming": false, 
      "writecb": null, 
      "writechunk": null, 
      "writeencoding": "buffer" 
     } 
     }, 
     "bodyUsed": false, 
     "size": 0, 
     "timeout": 0, 
     "_raw": [], 
     "_abort": false 
    } 
    }, 
    "message": "Network error: Network request failed with status 400 - \"Bad Request\"" 
} 
Error 
    at new ApolloError (/Users/rkstar/dev/projects/crate/microservices/dashboard/node_modules/apollo-client/apollo.umd.js:1490:23) 
    at /Users/rkstar/dev/projects/crate/microservices/dashboard/node_modules/apollo-client/apollo.umd.js:2149:24 
    at process._tickCallback (internal/process/next_tick.js:103:7) 

**** UPDATE **** i-Middleware, bevor Sie die req.headers und req.body

req.headers ------- 
{ 
    "accept": "*/*", 
    "content-type": "application/json", 
    "authorization": "JWT ", 
    "accept-encoding": "gzip,deflate", 
    "user-agent": "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)", 
    "connection": "close", 
    "content-length": "585", 
    "host": "localhost:9000" 
} 

req.body ------- 
{ 
    "query": "mutation updateTwitterAccessToken($data: TokenInput!) {\n updateTwitterToken(data: $data) {\n _id\n services {\n  twitter {\n  id\n  __typename\n  }\n  token {\n  token\n  expires\n  __typename\n  }\n  __typename\n }\n __typename\n }\n}\n", 
    "variables": { 
    "data": { 
     "accessToken": "000700000-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
     "accessTokenSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
     "_id": "yyyyyyyyyyyyyyyyy", 
     "service": "twitter", 
     "serviceId": "000700000" 
    } 
    }, 
    "operationName": "updateTwitterAccessToken" 
} 

console.log meine apolloMiddleware hinzugefügt

ich rufe client.mutate({ ... }) von meinem Web-Server, aber in den req.body hier, habe die Einrichtung ich diesen:

req.body ------- 
{ 
    "query": "mutation ..." 
.... 
} 

warum ist es "query": "mutation ..." und nicht "mutation": "mutation ..."?

Answer 1

TL; DR

i löste das Problem, und es war, weil meine update-token.graphql Datei eine Rückkehr Eigenschaft nicht richtig verschachtelt === Fehler hatte.

---

OKAY ... so gelöst ich dieses Problem. Es war ein dummer Fehler in meiner graphql-Mutation. Ich habe versucht, ein Feld zu bekommen, das in einem anderen Feld nicht existiert.

Ich hatte meine Abfrage in graphiql kopiert und eingefügt, wo es gut ging! was ich vergessen hatte, war, dass ich einen meiner rückkehr-vars verschachtelte, der den unterschied machte. Ich dachte, ich hätte meine Änderungen wieder in die Datei .graphql eingefügt ... aber anscheinend nicht.

was ist das interessant ist, ist, wie ich schließlich diesen Fehler herausgefunden:

i-Middleware aus meiner Anfrage zu drucken versucht, indem -------

router.all('/private', 
    bodyParser.json(), 
    (req, res, next)=>{ 
    console.log(JSON.stringify(req.route, null, 2)) 
    next() 
    }, 
    apolloMiddleware 
) 

, das zeigte mir viele Dinge , aber mir ist nichts gesprungen, als ich die Anfrage von graphiql vs.apollo-Client (wahrscheinlich, weil die eigentliche Abfrage eine Zeichenfolge war und nicht wie schön json formatiert)

dann endlich kam ich auf formatError, die ich in der Lage war mein Fehler haben Ausdruck:

const apolloMiddleware: any = graphqlExpress(request => ({ 
    debug: debugMode, 
    schema: executableSchema, 
    context: request, 
    formatError: e =>{ 
    console.log(JSON.stringify(e, null, 2)) 
    } 
})) 

und die zeigten, mir dies:

{ 
    "message": "Cannot query field \"token\" on type \"UserServices\".", 
    "locations": [ 
    { 
     "line": 9, 
     "column": 7 
    } 
    ] 
} 

nachdem sie diese Nachricht sehen, ich meine .graphql Datei umgehend aktualisiert und hat eine epische facepalm, wie ich die Mutation Arbeit beobachtete, wie über apollo-Client erwartet.