Question

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

我将Meteor.user（）模型链接到Apollo中的模式，由于有了查询组件，我现在可以访问它。我有一个看起来像这样的查询：

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

即可完成工作，其中有一个解析程序直接提供电子邮件地址。但是，我在不同的地方需要它，对于需要的每个组件，我都用相同的查询制作另一个 < Query > 组件，我将粘贴从文件复制到另一个。在我看来，如果我的许多组件都在一次又一次地查询相同的东西，那我就失去了一点。但是，我无法找到解决此“干”问题的方法。还没有那么多示例，包括来自react apollo的Query组件，因此，如果有人可以帮助我，将不胜感激。

Answer 1

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

如果您要覆盖此默认行为，则可以为特定的查询组件指定fetchPolicy-例如，也许您想始终从服务器获取新数据，在这种情况下，您将使用{{ 1}}或network-only。有关更多详细信息，请参见the docs。

注意：常见的“陷阱”是缓存使用cache-and-network（或id）字段来规范化缓存结果。这意味着您的查询必须包含_id字段（或提供id的自定义实现）才能看到预期的行为。有关更多详细信息，请参见此page。

就保持干燥而言，通常的做法是将查询存储在一个或多个单独的模块中，然后根据需要导入它们。因此，您可能会有一个dataIdFromObject文件，如下所示：

queries.js

import gql from 'graphql-tag' export const USER_QUERY = gql` query User { user { _id, email } } `附带有一个加载器，如果您使用的是Webpack，则可让您直接从.graphql / .gql文件导入查询。查看食谱here。还有一个babel插件，可以有效地完成相同的操作（检出here）。这些方法中的任何一种都应减少代码中的冗余。

编辑：如@ camba1的答案所指出，片段也可以用于使查询干燥：

graphql-tag

Answer 2

避免在各处复制粘贴查询代码可能有用的另一件事是使用查询片段。

例如：

# 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：

Answer 3

您可以在查询中使用cache-only或cache-first策略。

Docs

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

3 个答案: