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

时间:2018-10-09 13:41:28

标签: reactjs meteor graphql apollo

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

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

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

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

3 个答案:

答案 0 :(得分:3)

默认情况下,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

答案 1 :(得分: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

答案 2 :(得分:0)

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

Docs