使用 React 的 GraphQL 查询到数组列表？答案

【问题标题】：GraphQL Query to Array List using React?使用 React 的 GraphQL 查询到数组列表？
【发布时间】：2021-07-10 22:41:51
【问题描述】：

我目前正在开发一个 gatsby 网站，并且主要使用 react 组件来做这件事。我们的职位发布页面目前的工作方式是，它从一个数组中获取职位列表，该数组存储每个职位的信息，并以适当的样式将它们映射出来。

positions.js（部分）

const Positions = () => (
  <StyledPositions>
    <GlobalContainer>
      {PositionList.map((position, index) => (
        <StyledPosition key={index}>
          <StyledPositionName>
            <Link to={position.link} activeClassName="active">
              {position.name}
            </Link>
          </StyledPositionName>
        </StyledPosition>
      ))}
    </GlobalContainer>
  </StyledPositions>
);

export default Positions;

PositionList 是数组，看起来像这样。

positionslist.js

const Positionlist = [
  {
    name: "Senior Software Engineer- Infrastructure",
    link: "/careers/open_positions/sr_cloud_eng",
  },
  {
    name: "System Software Engineer",
    link: "/careers/open_positions/system_soft_eng",
  },
  {
    name: "Software Engineer (Database Development)",
    link: "/careers/open_positions/soft_eng_database",
  },
];

export default Positionlist;

我要做的是从外部职位发布管理网站的 GraphQL 查询中填充职位发布网站。我能够很好地获取信息，但我想以某种方式将信息转换为像 positionlist.js 这样的数组，以便 position.js 可以简单地以相同的方式映射信息。查询如下所示

query MyQuery {
  allLever {
    edges {
      node {
        text
        categories {
          commitment
          location
          team
        }
        applyUrl
      }
    }
  }
}

【问题讨论】：

你'能够很好地获取信息' ...然后你知道这个结构中的数组在哪里...阅读文档/遵循教程 - @987654321 @

标签： javascript html reactjs graphql gatsby

【解决方案1】：

所有 GraphQL 查询都将其结果存储在 props.data 中，正如您在 Gatsby's tutorial 中看到的那样。此时，您只需要进入嵌套结构如：

import * as React from 'react'
import { graphql } from 'gatsby'

const Positions = ({data}) => {
  let PositionList = data.edges;
  
  return <StyledPositions>
    <GlobalContainer>
      {PositionList.map(({node: position}) => (
        <StyledPosition key={position.name}>
          <StyledPositionName>
            <Link to={position.link} activeClassName="active">
              {position.name}
            </Link>
          </StyledPositionName>
        </StyledPosition>
      ))}
    </GlobalContainer>
  </StyledPositions>
}
export const query = graphql`
  query MyQuery {
  allLever {
    edges {
      node {
        name: text
        categories {
          commitment
          location
          team
        }
        link: applyUrl
      }
    }
  }
}
`
export default Positions

注意：最好避免将index 用作key，以便您可以使用其他字段

请记住，您几乎不需要更改以前的结构（因为一些解构 + 别名），但重要的是页面查询只能在页面中工作（因此得名）所以我假设 Positions是一个单独的页面。否则，您将需要从页面组件中传递props。

由于有别名，applyUrl 将别名为 link 和 text 到 name，因此您之前的结构将以完全相同的方式工作。

【讨论】：