Question

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

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

通过这种方式，模板无需再次执行另一个graphql查询

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

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

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

问题是，在盖茨比中对graphql进行大量调用是否有任何弊端？还是最好打一个电话，其余使用javascript？

（示例）

graphql

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

或者相反

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 } } }对某种情况有害吗？

Answer 1

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

Answer 2

FWIW，有这个gatsby issue

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

我认为您的示例数据足够小，因此无关紧要，尽管我确实想补充一点，为每个模板创建查询有一些好处：

如何查询数据直接放在其组件旁边-在需要调试的情况下，gatsby-node.js和模板之间不会来回切换。
添加数据更加容易，因为您只需要修改查询（相对于修改查询然后将数据添加到上下文）

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

2 个答案: