在GraphQL中查看器字段的含义是什么？

Question

GraphQL中根查询字段viewer的用途是什么？

基于this article，viewer可用于接受令牌参数，以便我们查看当前登录的用户。

我该如何实施？

Answer 1

viewer根查询字段

的目的

viewer不是GraphQL或Relay特有的。大多数Web应用程序都为其用户或查看者提供某些用途。用于对提供给用户的各种数据建模的顶级实体可以命名为viewer。您也可以将其命名为user。例如，Relay todo example有一个viewer根查询字段：

viewer: {
  type: GraphQLUser,
  resolve: () => getViewer(),
},

我们也可能没有viewer。例如，Relay starwars example没有任何viewer根查询字段。

简而言之，将此viewer作为GraphQL架构的根查询字段使我们能够根据当前用户提供数据。

实现：如何将身份验证令牌与查看器一起使用

我的回答遵循您提到的文章中已经描述的内容。步骤是：

1. 在服务器端，创建一个变异以获取身份验证令牌。我们将它命名为LoginMutation。此突变的输入是用户凭证，输出是身份验证令牌。

2. 在客户端，如果使用relay framework，请实施客户端突变。突变成功后，存储身份验证令牌。

3. 在客户端中继代码上，为authToken个查询添加viewer参数。 authToken的值是成功登录突变后收到的身份验证令牌。

替代

正如文章中已经提到的，对用户进行身份验证的另一种方法是在GraphQL之外进行。您可能希望查看两个优秀的答案this和this以获取详细信息。

Jonas Helfer写了一篇由两部分组成的文章，你会发现它非常有用：Part 1，Part 2

Answer 2

viewer字段（设计模式）背后的想法是将仅与当前登录用户相关的顶级查询字段分组。例如：

# EXAMPLE 1

quer {
  viewer {
    stories { ... } # the list of published stores as well as drafts (current user)
  }

  stories { ... }   # the list of published stories (all users)
}

此当前记录的用户数据本身已合并到viewer字段中或嵌套在其下方：

# EXAMPLE 2

query {
  viewer {
    id
    email
    displayName
    stories { ... }
  }
}

# EXAMPLE 3

query {
  viewer {
    me { id email displayName }
    stories { ... }
  }
}

可以通过完全删除viewer字段来简化上述所有三个示例，并且它们仍然具有完全相同的功能（推荐）：

query {
  # The currently logged in user or NULL if not logged in
  me {
    id
    email
    displayName
  }

  # Published stories only (all users)
  stories {
    ...
  }

  # Published stories as well as drafts (the current user)
  stories(drafts: true) {
    ...
  }
}

您可以在React Starter Kit中找到完整的示例，该示例可用作参考项目或新开发的种子/模板。参见src/server/schema.js。