在Gatsby中使用GraphQl时使用可变变量

Question

在我的Gatsby项目中，我为几个具有相同结构但不同过滤器的不同图形查询使用别名。我想在调用查询标识符时使用变量，但我不确定如何开始。

作为一个例子，让我们假设我的GraphQl看起来像这样:

import * as React from 'react';
import { graphql, Link } from 'gatsby';
const Component = ({ pageContext, data }) => (
<Layout pageTitle={pageContext.name}>
// Replace the [pageContext.aliasVariable] below with alias1 or alias2 supplied by the Gatsby Node API via pageContext 
data.[pageContext.aliasVariable].edges.map(({ node, i }) => (
<div key={i}>
<Link to={`/some-where/${node.slug}`}>
<h2>{node.title}</h2>
</Link>
</div>

</Layout>
);
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;

我感谢任何帮助。谢谢。

Answer 1

我不确定它是否可行，或者它是否有一些隐藏的警告，但应该遵循的方法是:

const Component = ({ pageContext, data }) => {
let { yourAliasedVariable } = pageContext;
return <Layout pageTitle={pageContext.name}>
// Replace the [pageContext.aliasVariable] below with alias1 or alias2 supplied by the Gatsby Node API via pageContext 
data.yourAliasedVariable.edges.map(({ node, i }) => (
<div key={i}>
<Link to={`/some-where/${node.slug}`}>
<h2>{node.title}</h2>
</Link>
</div>

</Layout>
};

您只需要使用解构从上下文中获取别名变量:

let { yourAliasedVariable } = pageContext;

用它来获取嵌套的数据。