reactjs - React/Apollo - 不同组件中的类似查询？

Question

我正在寻求有关使用 Apollo、React 和 Meteor 的最佳实践的帮助。

我将 Meteor.user() 模型链接到 Apollo 中的架构，现在可以通过查询组件来访问它。我有一个如下所示的查询:

gql`
  query User {
    user {
      _id,
      email
    }
  }
`

它完成了这项工作，解析器直接给出电子邮件地址。然而，我在不同的地方需要它，对于我需要它的每个组件，我正在制作另一个 < Query > 具有相同查询的组件我将粘贴从一个文件复制到另一个文件。在我看来，如果我的许多组件一次又一次地查询相同的事情，我就失去了所有的意义。然而，我无法找到这个“干”问题的解决方案。目前还没有那么多示例，包括来自 React apollo 的查询组件，因此如果有人可以帮助我，我将不胜感激。

Answer 1

默认情况下，Apollo 客户端使用 cache-first 的 fetchPolicy。这意味着如果查询结果已经在缓存中，则将从那里获取结果并且不会发出网络请求。这使您可以在多个 Query 组件中使用相同的查询，而不必担心一遍又一遍地向服务器发出相同的请求。

如果您想覆盖此默认行为，您可以为特定查询组件指定 fetchPolicy ，例如，您可能希望始终从服务器获取新数据，在这种情况下您可以使用仅网络或缓存和网络。请参阅the docs了解更多详情。

注意:一个常见的“问题”是缓存使用 id(或 _id)字段来标准化缓存结果。这意味着您的查询必须包含 id 字段(或提供 dataIdFromObject 的自定义实现)才能看到预期的行为。看这个page了解更多详细信息。

为了保持干燥，通常的做法是将查询存储在一个或多个单独的模块中，然后根据需要导入它们。所以你可以有一个像这样的 queries.js 文件:

import gql from 'graphql-tag'

export const USER_QUERY = gql`
  query User {
    user {
      _id,
      email
    }
  }
`

graphql-tag 附带一个加载器，如果您使用 Webpack，可以让您直接从 .graphql/.gql 文件导入查询。查看菜谱here 。还有一个 babel 插件可以有效地完成同样的事情(查看 here )。这些方法中的任何一种都应该减少代码中的冗余。

编辑:正如 @camba1 的回答所指出的，片段也可以用于干燥您的查询:

query User {
  user {
    ...userFields
  }
}

fragment userFields on User {
  _id,
  email,
}