javascript - 无法访问嵌套查询

Question

我想在页面上渲染来自手动 API 的简单数据，但似乎我无法访问嵌套查询。

这就是我所拥有的:

import React from 'react';
import {
    gql,
    graphql,
} from 'react-apollo';

//access to queries and map function
const ChannelsList = ({ data: {loading, error, items }}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">

      { items.map( itm => <div key={itm.id} className="channel">{itm.sku}</div> ) }
    </div>
  );
};

const channelsListQuery = gql`
  query ChannelsListQuery {
      allLinks {
        items {
          id
          sku
        }
      }
  }
`;

export default graphql(channelsListQuery)(ChannelsList);

不要介意这个“ channel ”名称，这是我用于自己的 api 的示例。问题是，所有包含“id、names、sku”等的查询都是“items”类型，对我来说它似乎无法访问它。 graphqli 服务器中的查询运行良好。所以，问题是 - 如何访问嵌套查询，以便我可以使用 map 并将其呈现在页面上？

架构结构:

const typeDefs = `
type Link {
    items: [itemapi]      
    }

    type itemapi {
        id: ID!
        sku: String!
        name: String!
    }
    type Query {
    allLinks: Link!
  }
`;

@OzySky 的@解决方案

const ChannelsList = ({ data: {loading, error, allLinks }}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">
      { allLinks.items.map( aLitm => <div key={aLitm.id} className="channel">{aLitm.sku}</div> ) }
    </div>
  );
}; 

Answer 1

在react-apollo中，查询数据通过带有查询名称的prop传递。因此，在您的情况下，您将通过 data.allLinks 属性访问项目。