Onepage with Gatsby JS and Contentful, how to import my first simple string

问题

I am trying to useStatic Query and GraphQL to get a simple title from Contentful, pass it to state and then show in the render. I cant make it work. I am attaching an image showing my current setup and errors.

Possible problems: 1. the query returns an array, and I need to change it into a string, or access 0 element, the first one, because my content type is just one, as it is a onepage.

2. Placing of the query in the component, I am not sure if it can be in the constructor of an component

For comparison: in the screen from my file you can see a variable name showing Josh Perez, when I uncomment it and add it to this.state = { dataTest: name}, then in RENDER: this.state.dataTest returns the name Josh Perez well, so passing a variable to state works, but passing a string from graphql query is not possible for me...

I have a limitation which is that I need to create my page component with a class, because of the fact that in the Component did mount I am placing some JQuery, which works well for me.

THIS IS MY TEST CODE 1. In Constructor

class IndexPage extends React.Component {

constructor(props) {
    super(props);
    // this.state = { data: null };
    const name = 'Josh Perez';




    this.state = { dataTest: name };




}

2. In render

   {this.state.dataTest}

This works, the variable name is passed to state and shown in render.

However, I want to show in this way a simple text string from Contentful. So I am trying code like this (error message is shown in the screens):

class IndexPage extends React.Component {

constructor(props) {
    super(props);
    // this.state = { data: null };
    //const name = 'Josh Perez';
    const data = useStaticQuery(graphql`
    query {
        allContentfulHomepage (limit: 1) {
          edges {
            node {
              section1Title
            }
          }
        }

      }
    `)


    this.state = { dataTest: data };

It turns out, that the below suggested solution works. I am putting below my attempt at callingfurther content. It does not work. It displays the following error "Cannot read property 'map' of undefined". I would be very grateful for a suggestion how to improve it, how to make it work.

export default class Test extends Component {
    state = {
 dataTest: this.props.data.test.edges.map(({ node: test }) => 
 test.section1Title),
 dataTest2: this.props.data.test.edges.map(({ node: test }) => 
 test.section2Lead),
 dataTest3: this.props.data.test.edges.map(({ node: test }) => 
 test.section1Text.json)

    }

    render() {
        return <div>
            <h1>{this.state.dataTest}</h1>
            <h1>{this.state.dataTest2}</h1>
            {documentToReactComponents(this.state.dataTest3)}
        </div>
    }
}

export const query = graphql`
{
  test:allContentfulHomepage(limit: 1) {
    edges {
      node {
        section1Title
        section2Lead
        section1Text {
            json
        }
      }
    }
  }
}
`

回答1:

If you're writing a page component as a class, you don't need to use the UseStaticQuery, you can use the simple PageQuery for this purpose. To loop through arrays, the map() method works as well.

UPDATE

import React, { Component } from 'react';
import { graphql } from 'gatsby';

export default class Test extends Component {
  render() { 

  const { edges } = this.props.data.test;

    return (
     <div>
      {edges.map(({ node: itemFromContentful }) => (
          <h1>{itemFromContentful.section1Title}</h1>
          <h1>{itemFromContentful.section2Lead}</h1>
          {documentToReactComponents(section1Text.json)}
      ))}
     </div>
    );
  }
}

export const query = graphql`
{
  test:allContentfulHomePage(limit: 1) {
    edges {
      node {
        section1Title
      }
    }
  }
}
`

Whats happening:

1. The GraphQL query you're using is bringing the data you want from the Contentful;
2. The React Stateful Component (class Test) is receiving all the data available from the query as a prop;
3. We're accessing this data on the render() method using the destructing assignment;
4. we're accessing the data nodes through the map method (the one I suggested you to take a look;
5. The curly braces into the JSX allows you to use JS to manipulate what you want - In this case, to render the information.

来源：https://stackoverflow.com/questions/57395133/onepage-with-gatsby-js-and-contentful-how-to-import-my-first-simple-string