为什么graphql查询在反应中不起作用？

Question

在我的 react 项目中，我使用查询来搜索 github 用户数据。查询如下：

const GET_USER = (user) => `
{
  user(login: "${user}") {
    name
    login
    avatarUrl
    company
    gists{
     totalCount
   }
   following{
      totalCount
    }
    followers(last: 5){
      edges{
            node{
                id
            name
            avatarUrl
        }
      }
    }
    repositories(last: 5){
      edges{
        node{
          id
          name
        }
      }
    }
  }
}
`;

如果我仅通过在 followers 中添加一个名为 email 的字段来更新查询，则反应应用程序将停止工作：

followers(last: 5){
      edges{
            node{
            id
            name
            avatarUrl
            email
        }
      }
    }

如果我在查询中添加有关组织的数据，也会发生同样的情况，如下所示：

 organizations(last: 5){
      edges{
        node{
          id
          name
        }
      }
    }

但是当我在此链接中执行相同的查询时：[https://developer.github.com/v4/explorer/] 它可以工作。

我的反应项目在链接中：[https://github.com/rvmelo/react-tech6-final-project]。查询位于App.js 文件夹中的App.js 文件中。

Answer 1

它停止工作，因为用户可能没有此类信息。

我克隆了你的仓库并添加了代码

<div>email:{user.following.email}</div>

它确实停止工作，然后我添加了一个后备

<div>email:{user.following.email || ""}</div>

它奏效了。

您可能想在渲染之前检查这些信息，例如

{user && user.following && user.following.email &&
  (<div>email:{user.following.email}</div>)
}

organizations 也一样

<p>
  {user && user.organizations &&
    <div>Organization name:{user.organizations.name}</div>
  }
</p>

至于followers(已更新)

const Followers = ({ followers }) => (
<div>

  <strong>Followers updated for SO:</strong>

  <ul>
    {followers.edges.map(follower => (
    <li key={follower.node.id}>
      <img src={follower.node.avatarUrl}/>
      <div>
        {follower && follower.node && follower.node.name && (
        <div>Name:{follower.node.name}</div>) }
      </div>
      <div>
        {follower && follower.node && follower.node.email && (
        <div>Email:{follower.node.email}</div>) }
      </div>
    </li>
    ))}
  </ul>
</div>
);

我的个人资料的屏幕截图。一个有电子邮件的追随者，另一个没有。

我继续分叉你的回购，here's my repo 从你的问题的one 克隆 确保您的令牌具有权限。在一时冲动之下，我完全访问了我的钥匙。检查你的！