在Gatsby中使用GraphQL时如何通过可变变量调用查询别名

你遇到的本质是JS对象动态属性访问的语法问题，不需要改动你的GraphQL查询逻辑，仅需要修正组件内的属性访问写法即可：

• 移除data和方括号之间的多余.，直接使用data[pageContext.aliasVariable]即可读取对应别名的查询结果
• 建议增加兜底逻辑避免别名传递错误时页面报错

修正后的完整代码如下：

import * as React from 'react';
import { graphql, Link } from 'gatsby';

const Component = ({ pageContext, data }) => {
  // 动态获取对应别名的查询结果，加兜底避免undefined报错
  const queryResult = data[pageContext.aliasVariable] ?? { edges: [] }
  return (
    <Layout pageTitle={pageContext.name}>
      {queryResult.edges.map(({ node, i }) => (
        <div key={i}>
          <Link to={`/some-where/${node.slug}`}>
            <h2>{node.title}</h2>
          </Link>
        </div>
      ))}
    </Layout>
  )
};

// 原有GraphQL查询无需任何改动
export const query = graphql`
query things ($id: String = "") {
    alias1: parentNode(filter: { firstFilter: { someId: { eq: $id } } }) {
      edges {
        ...myData
      }
    }
    alias2: parentNode(filter: { secondFilter: { someOtherId: { eq: $id } } }) {
      edges {
        ...myData
      }
    }
  }
`

export default Component;

注意事项 #

• 请确保Gatsby Node API的createPage阶段传递的aliasVariable值和GraphQL查询中定义的别名完全一致，大小写也要匹配
• 如果使用TypeScript，可以额外给pageContext和查询结果加类型定义，提升开发体验

内容的提问来源于stack exchange，提问作者myMan