React-Apollo无法访问嵌套GraphQL查询数据的技术求助

你的问题核心是没搞清楚GraphQL返回数据的层级结构！咱们结合你的Schema和代码来拆解：

根据你定义的Schema，allLinks查询返回的是一个Link类型对象，而包含id、sku的items数组是Link对象的子属性——也就是说，接口返回的data结构是 { loading, error, allLinks: { items: [...] } }，items并不在data的顶层。

你原来的组件代码直接从data里解构items，这自然拿不到任何数据！修正后的代码需要先获取allLinks对象，再访问它下面的items数组：

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

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

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

export default graphql(channelsListQuery)(ChannelsList);

关键修正说明： #

• 组件参数解构时，把原来的items替换成allLinks，因为真正的数组嵌套在allLinks内部
• 遍历数据时，通过allLinks.items.map(...)来定位到目标数组，这样就能正常渲染每个条目了

内容的提问来源于stack exchange，提问作者Brunhilda