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

Posted 2023-03-10

【中文标题】React/Apollo - 不同组件中的类似查询？

【英文标题】：React/Apollo - Similar Queries in different Component?

【发布时间】：2019-03-14 07:43:43

【问题描述】：

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

我将 Meteor.user() 模型链接到 Apollo 中的 Schema，现在我可以通过查询组件访问它。我有一个看起来像这样的查询：

gql`
  query User 
    user 
      _id,
      email
    
  
`

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

【参考方案1】：

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

Docs

【讨论】：

如果我理解得很好，它实际上是默认集成的？所以我的双重查询不是坏习惯，因为如果它在缓存中，Apollo 不会查询它两次？

它不应该......当查询的所有数据/部分被提前读取时。您可以强制/微调它以满足您的要求。

【参考方案2】：

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

【讨论】：

感谢详细而清晰的回答。很有帮助！

【参考方案3】：

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

例如：

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

【讨论】：

谢谢@camba1，这很好。我会将其添加到已接受的答案中。