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

不要介意这个＆＃34;频道＆＃34;名字，这是我用于我自己的api的例子。问题是，所有查询都包含＆＃34; id，names，sku＆＃34;等等在"items" type中，对我来说它似乎无法访问它。 graphqli服务器中的查询工作正常。那么，问题是如何访问嵌套查询，以便我可以使用map并在页面上呈现它？

架构结构：

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

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

@Pzy by @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 prop。

访问项目

Answer 2

如果查询中具有高度嵌套的返回值，则访问嵌套对象的一种方法是首先使用Object.values（）将其转换为数组。然后使用点符号访问该字段的数组项及其对应的值。

user_id

无法访问嵌套查询

2 个答案: