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

Posted 2023-03-08

【中文标题】使用 React 的 GraphQL 查询到数组列表？

【英文标题】：GraphQL Query to Array List using React?

【发布时间】：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 @

【参考方案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，因此您之前的结构将以完全相同的方式工作。