我正在寻求有关使用 Apollo、React 和 Meteor 的最佳实践的帮助。
我将 Meteor.user() 模型链接到 Apollo 中的 Schema，现在我可以通过查询组件访问它。我有一个看起来像这样的查询：
gql`
query User {
user {
_id,
email
}
}
`
它完成了这项工作，解析器直接提供电子邮件地址。但是，我在不同的地方需要它，并且对于我需要它的每个组件，我正在使用相同的查询制作另一个 < Query > 组件，我将粘贴从文件复制到另一个。在我看来，如果我的许多组件一次又一次地查询相同的东西，我就失去了所有意义。但是，我无法找到解决此“干燥”问题的方法。还没有太多示例，包括来自 react apollo 的 Query 组件，所以如果有人可以帮助我解决这个问题，我们将不胜感激。
【问题讨论】：
标签： reactjs meteor graphql apollo
您可以在查询中使用cache-only 或cache-first 策略。
【讨论】：
默认情况下，Apollo 客户端使用 fetchPolicy 或 cache-first。这意味着如果查询的结果已经在缓存中，它将从那里获取并且不会发出网络请求。这使您可以跨多个 Query 组件使用相同的查询，而不必担心一遍又一遍地向您的服务器发出相同的请求。
如果您想覆盖此默认行为，您可以为特定查询组件指定fetchPolicy - 例如，您可能希望始终从服务器获取新数据，在这种情况下您可以使用network-only 或也许cache-and-network。详情请见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,
}
【讨论】：
另一件可能有助于避免在各处复制粘贴查询代码的方法是使用查询片段。
例如：
# Query that contains a fragment
query myQuery1($_key: ID!) {
myQuery1(_key: $_key) {
field1,
...myFragmentFields
}
}
# Fragment to be used in queries
fragment myFragmentFields on myQueryType {
_key,
name,
formula,
type
}
这里是documentation：
【讨论】：