GraphQL 上的动态变量调用 - React - Gatsby答案

【问题标题】：Dynamic variable call on GraphQL - React - GatsbyGraphQL 上的动态变量调用 - React - Gatsby
【发布时间】：2020-08-16 02:15:37
【问题描述】：

我实际上是在尝试通过我的 API 在 React 中创建一个带有一些不同内容的滑块，该 API 有一些不同的键来访问这些内容。

对于我的 API 中的 graphQL 查询，我有：

title
  excerpt
  nombreDeSlides
  descriptionNode {
    childMarkdownRemark {
      html
    }
  }
  description1Node {
    childMarkdownRemark {
      html
    }
  }
  description2Node {
    childMarkdownRemark {
      html
    }
  }
  description3Node {
    childMarkdownRemark {
      html
    }
  }

我可以像data.descriptionNode.childMarkdownRemark.html 一样访问它，但我没有找到一种方法将键“descriptionNode”动态更改为“description1Node”--“description2Node”--...

我的代码已经在映射中，可以让我的变量索引循环，但我真的没有找到将变量索引放在我的键名中的方法。

【问题讨论】：

标签： javascript json reactjs graphql

【解决方案1】：

假设您想要父节点的所有描述节点，最好有一个名为 descriptionNodes 的字段，该字段返回一个数组，允许您通过索引访问子节点。

  title
  excerpt
  nombreDeSlides
  descriptionNodes {
    childMarkdownRemark {
      html
    }
  }

然后你可以通过他们的索引来查找孩子

data.descriptionNodes[0].childMarkdownRemark.html

如果您确实想保留对象结构，或者想独立于父对象自定义一组固定的 4 张幻灯片，也可以将 query alias' 与查询变量结合使用。

  title
  excerpt
  nombreDeSlides

  descriptionNode(name: $name0) {
    childMarkdownRemark {
      html
    }
  }

  description1Node: descriptionNode(name: $name1) {
    childMarkdownRemark {
      html
    }
  }

  description2Node: descriptionNode(name: $name2) {
    childMarkdownRemark {
      html
    }
  }

  description3Node: descriptionNode(name: $name3) {
    childMarkdownRemark {
      html
    }
  }

另外请记住，GQL 查询只是字符串，你可以用它们做各种疯狂的事情，尽管我大多数时候不推荐它。

title
excerpt
nombreDeSlides

${['', 1, 2, 3].map((node) =>
  `description${node}Node: descriptionNode(name: ${node}) { ...nodeFields }`
).join('\n')}

fragment nodeFields on descriptionNode {
  childMarkdownRemark {
    html
  }
}

【讨论】：

【解决方案2】：

所以，目前，我有一个适用于一些短名单的解决方案，它适用于我的情况，但我仍然对暗示动态拥有密钥的其他解决方案感到好奇。

我的解决方案是创建一个像这样的数组：

let htmlArray = [
              data.description1Node.childMarkdownRemark.html,
              data.description2Node.childMarkdownRemark.html,
              data.description3Node.childMarkdownRemark.html,
              data.description4Node.childMarkdownRemark.html,
              data.description5Node.childMarkdownRemark.html,
              data.description6Node.childMarkdownRemark.html
              ];

并使用索引 htmlArray[index] 获取结果。

如果你能为我遇到的这个问题找到其他解决方案，谢谢。

【讨论】：