Javascript 无法访问嵌套查询

我想在页面上呈现来自手动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);

@@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>
  );
}; 

---

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

如果您的查询具有高度嵌套的返回值，那么访问嵌套对象的一种方法是首先将其转换为具有object.values的数组。然后使用点表示法访问数组项及其对应值的字段

const myQuery = gql`
  query {
    users {
      id
      name
      pet {
        id
        name
      }
    }
  }
`;

// Inside Render function if using React ...
return users.map(({ id, name, pet }) => (
        <div key={id}>
          <ul>
            <li>
              {id} {name}
              {Object.values({ pet })[0].name}
            </li>
          </ul>
        </div>
      ));

---

你的意思是，我应该使用allLinks来代替条目，让我可以访问条目？这实际上是一个评论，而不是一个答案。再重复一点，。根据我从您那里了解到的，allLinks应该是一个类型项数组，但这当然取决于您构建模式的方式。data.allLinks.items应该是一个类型项数组itemapi@OzySky编辑了第一篇文章，看一看，它仍然没有呈现任何东西。

const myQuery = gql`
  query {
    users {
      id
      name
      pet {
        id
        name
      }
    }
  }
`;

// Inside Render function if using React ...
return users.map(({ id, name, pet }) => (
        <div key={id}>
          <ul>
            <li>
              {id} {name}
              {Object.values({ pet })[0].name}
            </li>
          </ul>
        </div>
      ));