web-dev-qa-db-ja.com

Graphiqlの問題なしにReactのGraphQLクエリ上の予期しないJSON

私はアポロとのReactを介して非常に基本的なクエリをやろうとしています。

Graphiqlでこのクエリを実行すると、結果がわかりますが、私のアプリでは、未定義のデータオブジェクトが取得されます。メッセージのエラーとメッセージ：

ネットワークエラー：予期しないJSON入力の終わり

クエリは次のとおりです。

_query {
    category(id: 3) {
        id
        children {
            id
            name
        }
    }
}
_

これは私のコンポーネントです

_import React, { Component } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const CATEGORIES_LIST = gql`
    query CATEGORIES_LIST {
        category(id: 3) {
            id
            children {
                id
                name
            }
        }
    }
`;

class Cat extends Component {
    render() {
        return (
            <div>
                <p>Items!</p>
                <Query query={CATEGORIES_LIST}>
                    {payload => {
                        console.log(payload);
                        return <p>fetch done!</p>;
                    }}
                </Query>
            </div>
        )
    }
}

export default Cat;
_

Graphiqlの応答はまったく同じ要求であるが

_{
  "data": {
    "category": {
      "id": 3,
      "children": [
        {
          "id": 4,
          "name": "Bags"
        },
        {
          "id": 5,
          "name": "Fitness Equipment"
        },
        {
          "id": 6,
          "name": "Watches"
        }
      ]
    }
  }
}
_

ちなみに、ローカルMagento 2.3 GraphQL Serverに問い合わせます。

[ネットワーク]タブを検査するとき、これはGraphQLエンドポイントから取得した応答です。そのため、URL版はレスポンスに問題がありません

_{
   "data":{
      "category":{
         "id":3,
         "children":[
            {
               "id":4,
               "name":"Bags",
               "__typename":"CategoryTree"
            },
            {
               "id":5,
               "name":"Fitness Equipment",
               "__typename":"CategoryTree"
            },
            {
               "id":6,
               "name":"Watches",
               "__typename":"CategoryTree"
            }
         ],
         "__typename":"CategoryTree"
      }
   }
}
_
reactjsgraphqlmagento2apollo
7
Kay Int Veen

バックエンドのURLを反応するプロキシとして追加しましたか？、通常はトリックをします。 Package.jsonに追加します

次にURIを「/ GraphQL」に設定します。

0
JasonC