为什么 Apollo GraphQL 什么都不渲染？答案

【问题标题】：Why is Apollo GraphQL rendering nothing?为什么 Apollo GraphQL 什么都不渲染？
【发布时间】：2018-12-09 16:27:24
【问题描述】：

根据https://www.apollographql.com/

我有一个组件：

const OrganizationsList = () => (
  <Query
    query={gql`
      {searchOrganizations(count: 10, offset: 0)
        {
          id,
          legalBusinessName,
          shops {
            shopId,
            shopVersion,
            organizationId,
            sortIndex,
            alternativeName
          }
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>
      if (error) return <p>Error :(</p>
      console.log(data.searchOrganizations)

      return data.searchOrganizations.map((organization, index) => (
        <div key={index}>
          <p>{`${organization.id}: ${organization.legalBusinessName}`}</p>
        </div>
      ))
    }}
  </Query>
)

class ListOrganizationsPage extends Component {
  render() {
    return (
      <OrganizationsList />
    )
  }
}

据我了解，它应该仅在获取数据时才呈现数据，否则应该呈现loading。

但是，loading 被渲染，没有别的。在控制台中，记录了数据，然后弹出此错误：

Uncaught (in promise) 错误：Query.render()：必须返回一个有效的 React 元素（或 null）。你可能返回了一个未定义的数组或其他一些无效对象。

我在这里错过了什么？

【问题讨论】：

标签： reactjs frontend graphql apollo

【解决方案1】：

这不是因为你返回一个数组而不是一个 React 元素。应该是

return (<div>
  { 
    data.searchOrganizations.map((organization, index) => (
        <div key={index}>
          <p>{`${organization.id}: ${organization.legalBusinessName}`}</p>
        </div>))}
   </div>)

【讨论】：

是的！我期待这是显而易见的。谢谢！