GraphQLからのレスポンスの解析が正しくありません

Question

私はGraphQLに新しく、Next.jsに構築されたプロジェクトでこれを使用しており、状態管理にはReduxを使用しています。私はGraphiQLインターフェイスで完璧な結果を得ているかなり複雑なクエリを持っています。 タブの場合でも、DevToolsの/graphqlコールは、クエリで要求された構造に従って完全な応答を持つように見えます。しかし、ApolloProviderが状態（Redux Store）で利用可能になっているデータは、奇妙な方法で解析されています。完全に罰金単一JSONのオブジェクトを見て、しかし間違ってそれを解析することが、キーの多くを取得していますApollo思えるのです、GraphiQLで

$Item:<some_id>.image:Object 
$Item:<some_other_id>.artist:Object 
$ROOT_QUERY.suggestions:Object 

のように（ を入れ子に、すべてのオブジェクトが迷子にされた）キーの多くを見ています値の組み合わせはdataです。

取得するために私のReactコンポーネントに簡単なコードを使用しています：

ここ

export default graphql(fetchDataQuery, { 
    props: ({ data }) => ({ 
    data, 
    }), 
})(ComponentName); 

、私はthis.props.dataを記録しようとした場合、すべてのデータは、罰金のようです。私は何が欠けていますか？正しいデータはどのようにしてReduxストアに保存できますか？

マイApolloClient作成コードは次のとおりです。

function create() { 
    return new ApolloClient({ 
    ssrMode: !process.browser, 
    networkInterface: createNetworkInterface({ 
     uri: 'http://localhost:4000/graphql', 
     headers: { 
      accept: 'application/json', 
      'content-type': 'application/json', 
      'cache-control': 'no-cache' 
     }, 
     opts: { 
     credentials: 'same-origin', 
     }, 
    }), 
    }); 
} 

その他の情報が必要な場合は、私に知らせてください。ありがとう

Answer 1

これは予想された動作です。 Apolloはクエリを介して受け取ったデータを自動的に正規化します。hereの詳細を読むことができます。

クエリで提供されるデータにアクセスするには、graphql HOCコンポーネントApolloが提供する必要があります。これはReduxのconnect HOCとよく似ており、特定のクエリから受け取ったデータをラップされたコンポーネントのpropsにマップすることができます。

コンポーネントに両方のHOCを使用する必要がある場合、それらを統合することはかなり簡単です。 ReduxとApollo hereとの統合の詳細については、こちらをご覧ください。