gatsbyjs：多次使用graphql，还是一次使用并通过上下文传递结果？

Posted 2023-03-08

【中文标题】gatsbyjs：多次使用graphql，还是一次使用并通过上下文传递结果？

【英文标题】：gatsbyjs: using graphql multiple times, or one time and pass the results through context?

【发布时间】：2019-07-11 17:57:25

【问题描述】：

使用gatsby-node.js 并以编程方式创建页面，我有两个选择：

我可以在 gatsby-node.js 上对我需要的所有内容进行 graphql 查询，然后将带有 context 的边数组（例如）传递给我使用的不同模板。

这样，模板就不需要再次查询graphql

我可以在gatsby-node.js 上执行相同的查询（因为无论如何我都需要这些信息），但是我可以将相关信息与context 一起传递给模板，以便他们可以对graphql 进行其他查询检索他们需要的数据。

这样，我不会通过上下文传递大量数据（并非如此，但这最终可能会发生），而是重复数据库查询。

什么更有效？我看到文档似乎建议重复 graphql 查询，但我不完全确定。

所以问题是，在 gatsby 中调用graphql 有什么缺点吗？还是首选打一个电话，其余的使用 javascript？

（示例）

export const createPages = ( graphql, actions ) => 
...
  return graphql(`
    query 
...
  `).then(result => 
...
     result.data.allMarkdownRemark.edges.map(( node ) => 
      createPage(
        component: path.resolve(`./src/templates/myTemplate.js`),
        context: 
          name: node.name,
          title: node.title,
          date: node.date,
          tags: node.tags,
          html: node.html,
        ,
...

在模板中，不要做任何查询，因为需要的内容在上下文中

或者相反

      createPage(
        component: path.resolve(`./src/templates/myTemplate.js`),
        context: 
          name: node.name,
        ,

在模板中，做具体的查询

  query($name: String) 
    allMarkdownRemark(filter:  name: eq: $name ) 
      edges 
        node 
          name
          title
          date
          tags
          html
        
      
    

在我看来，执行这两个查询似乎是多余的，但是，过度使用context 可能会在某种程度上有害吗？

【参考方案1】：

FWIW，这是gatsby issue

但真正完整的数据不应该通过上下文传递到页面 - 您应该只传递在页面查询中使用的最少需要的数据（如 id 或 slug）以在那里获取完整数据。

我认为您的示例数据足够少，这并不重要，但我想补充一点，为每个模板创建查询有一些好处：

数据的查询方式直接放在其组件旁边 - 当需要调试时，无需在 gatsby-node.js 和模板之间来回切换。 添加数据更容易，因为您只需要修改查询（与修改查询然后将数据添加到上下文相比）

【讨论】：

是的，这些都是很好的点，确实更模块化，谢谢:)

【参考方案2】：

最后，我决定在gatsby-node.js 中保留尽可能少的查询，并且每个模板都会执行更适合他们需要的查询