时间戳

首页 > 解决方案 > 在 Gatsby 中使用 GraphQl 时使用可变变量

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

问题描述

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

例如，假设我的 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;

我很感激这方面的任何帮助。谢谢。

标签： graphqlgatsby

解决方案

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

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;

只需使用它来获取嵌套数据。

推荐阅读