带有 GraphQl 关系数据的 Gatsby/Strapi 不会在页面上填充

Question

由于某种原因，这个脚本只有一部分工作。但是new_students 查询不起作用。

import React from "react"
import styled from "styled-components"

import {  Link, graphql } from "gatsby"
import Img from "gatsby-image"
import ClassImg from 'gatsby-background-image'
import Layout from "../components/layout"
import { Container, Row, Col } from 'reactstrap';

import 'bootstrap/dist/css/bootstrap.min.css'
import "./class.scss"

除此部分之外的其他所有内容<p>{classdesc.new_students.firstname}</p>

const ClassName = styled.div`
  color: white;
`
const Section = styled.div`
  margin-top: 20px
`

export default function Class({ data }) {
  const classdesc = data.strapiClassList
  
  return (
    <Layout>
      <Container className={`justify-content-md-center pt-5`}>
        <Row className={`justify-content-md-center`}>
          <Col className={`col-md-auto`}>
            <ClassImg
              Tag="section"
              className={`class-img`}
              fixed={classdesc.class_img.childImageSharp.fixed}
            >
              <ClassName className={`class-name text-center`}>{classdesc.classname}</ClassName>
            </ClassImg>
            <Section>
              <p>{classdesc.days}</p>
              <p>{classdesc.start} - {classdesc.end}</p>
              <p>{classdesc.class_desc}</p>
              <p>{classdesc.new_students.firstname}</p>
            </Section>
          </Col>
        </Row>
      </Container>
    </Layout>
  )
}

GraphQL

export const query = graphql`
  query($slug: String!) {
    strapiClassList(slug: { eq: $slug }) {
      classname
      zoomurl
      days
      start
      end
      class_desc
      class_img {
        childImageSharp {
          fixed(width: 300) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      new_students {
        firstname
        student_img {
          childImageSharp {
            fixed(width: 30) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

Answer 1

改成：

const ClassName = styled.div`
  color: white;
`
const Section = styled.div`
  margin-top: 20px
`

export default function Class({ data }) {
  const { strapiClassList } = data;
  
  return (
    <Layout>
      <Container className={`justify-content-md-center pt-5`}>
        <Row className={`justify-content-md-center`}>
          <Col className={`col-md-auto`}>
            <ClassImg
              Tag="section"
              className={`class-img`}
              fixed={strapiClassList.class_img.childImageSharp.fixed}
            >
              <ClassName className={`class-name text-center`}>{strapiClassList.classname}</ClassName>
            </ClassImg>
            <Section>
              <p>{strapiClassList.days}</p>
              <p>{strapiClassList.start} - {classdesc.end}</p>
              <p>{strapiClassList.class_desc}</p>
              <p>{strapiClassList.new_students.firstname}</p>
            </Section>
          </Col>
        </Row>
      </Container>
    </Layout>
  )
}

假设您在 GraphQL 查询中没有任何问题，您在此处重组错误的数据：

export default function Class({ data }) {
  const classdesc = data.strapiClassList

你只收到classdesc。

您查询的数据始终在props.data.queryName 内（将queryName 更改为正确的值，在您的情况下为strapiClassList），因此它将代表props.data. strapiClassList。由于您将props解构为data，因此您可以直接访问您的嵌套属性，您的数据将直接在strapiClassList中。

如果你想获取属性名本身，你可以再次解构strapiClassList。