バッチモードのGrapheneはステータス400で応答します。React-Apolloリクエストへのバッチリクエストはリストを受け取る必要があります

Question

Graphene-Django GraphQLサーバーfaileへのReact-Apolloクライアント（詳細は下記参照）からのGraphQLリクエストは ：

Batch requests should receive a list, but received {... 

なぜですか？セットアップ

を有する（graphene-djangoを使用して）GraphQLサーバガットグラフ機能I QL。例えば

query AllMsgsApp { 
    allMessages { 
     id 
     message 
    } 
} 

をもたらす：

{ 
    "data": { 
    "allMessages": [ 
     { 
     "id": "TWVzc2FnZVR5cGU6MQ==" 
     "message": "Some message..." 
     } 
    ] 
    } 
} 

をフロントエンド（create-react-appを使用して）アプリケーションを反応させ、apollo-clientらです。 App.jsで

マイテストスニペットがある：yarn start一旦

import React, { Component } from 'react' 
import { ApolloClient, InMemoryCache } from 'apollo-client-preset'; 
import { ApolloProvider } from 'react-apollo'; 
import { createHttpLink } from 'apollo-link-http'; 
import gql from 'graphql-tag' 

const client = new ApolloClient({ 
    link: createHttpLink({ 
    uri: 'http://localhost:8000/gql/' }), 
    cache: new InMemoryCache(), 
}); 

client.query({ 
    query: gql` 
    query AllMsgsApp { 
     allMessages { 
     id 
     message 
     } 
    } 
    ` 
}).then(response => console.log(response.data.allMessages)) 

、得られた応答は、400 Bad Requestある：

{"errors":[{"message":"Batch requests should receive a list, but received {'operationName': 'AllMsgsApp', 'variables': {}, 'query': 'query AllMsgsApp { 
    allMessages { 
    id 
    message 
    __typename 
    } 
} 
'}."}]} 

依存

"dependencies": { 
    "apollo-cache-inmemory": "^1.1.4", 
    "apollo-client": "^2.0.4", 
    "apollo-client-preset": "^1.0.5", 
    "apollo-link-http": "^1.3.1", 
    "graphql": "^0.12.0", 
    "graphql-tag": "^2.6.0", 
    "react": "^16.2.0", 
    "react-apollo": "^2.0.4", 
    "react-dom": "^16.2.0", 
    "react-router-dom": "^4.2.2", 
    "react-scripts": "1.0.17" 
    } 

エクストラ

ところで、以下：

curl -X POST -H "Content-Type: application/json" -d '{"query": "{ allMessages { id, message } }"}' http://localhost:8000/gql 

は基本的に同じエラーが返されます。

{"errors":[{"message":"Batch requests should receive a list, but received {'query': '{ allMessages { id, message } }'}."}]} 

しかしを、この1は（囲みに気づく期待される結果を返します。 [ ]）：

curl -X POST -H "Content-Type: application/json" -d '[{"query": "{ allMessages { id, message } }"}]' http://localhost:8000/gql 

です：

[ 
    { 
    "data":{ 
     "allMessages":[ 
     { 
      "id":"TWVzc2FnZVR5cGU6MQ==", 
      "message":"Some message..." 
     } 
     ] 
    }, 
    "id":null, 
    "status":200 
    } 
] 

Answer 1

代わりのBatchHttpLink以降を使用しcreateHttpLinkを使用。私はこれが役立つことを願っています

import { BatchHttpLink } from "apollo-link-batch-http";

と

const client = new ApolloClient({ 
    link: new BatchHttpLink({ 
    uri: 'http://localhost:8000/gql/' }), 
    cache: new InMemoryCache(), 
}); 

：このような

インポート。これはあなたのサーバーから期待しているApolloのバッチリクエストを送信します。