0

I'm using React and Contentful to build an app, this uses GraphQL for data querying and I'm trying to retrieve an array on a 'post' style page created by the slug. I'm able to pull through static data but I need to be able to display content from a couple of different arrays but I see to be running into either a routing or parsing issue.

I've created the GraphQL query below:

export const pageQuery = graphql`
query CareerPageQuery($slug: String!) {
contentfulSite(id: { eq: "c898f54a-af7b-5e84-acd2-4a5ff6b0d086" }) {
  siteTitle
}
contentfulCareer(slug: { eq: $slug }) {
  title
  slug
  description
  thePerson {
    info {
      info
    }
  }
  theJob {
    info {
      info
    }
  }
  theExperience {
    info {
      info
    }
  }
  theRewards {
    info {
      info
    }
  }
  progression {
    progression
  }
  toApply {
    toApply
  }
}

} `

I then create the variables so that I'm able to access static data such as the title and description:

const career = get(this.props, 'data.contentfulCareer')

This allows me to grab the title like so {career.title} but when I try and map through an array it is throwing an error.

ERROR #85911  GRAPHQL

There was a problem parsing "website-name/src/templates/career.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

I'm mapping through the array as follows:

{career.thePerson.map((value) => (
   {value.info.info}
))}

I can't seem to pinpoint the syntax error or if there is an overall bug that I'm not seeing. Chances are I'm missing something!

There is an additional error message saying this:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

website-name/src/templates/career.js: Unexpected token, expected "," (128:20)

  126 |             <CareerTitle>The Role:</CareerTitle>
  127 |             {career.thePerson.map((value) => (
> 128 |               {value.info.info}
      |                     ^
  129 |             ))}
  130 |             <CareerTitle>Responsibilities:</CareerTitle>
  131 |             {/*<CareerText dangerouslySetInnerHTML={{ __html: career.responsibilities.responsibilities}} />*/}

File: src/templates/career.js:128:20
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Sam St Aubyn
  • 127
  • 1
  • 9
  • Can you share the result of the GraphQL query in the GraphiQL playground to see the expected data structure (`localhost:8000/___graphql`). Can you also share the `career.js` template? (at least he needed parts: the query and its implementation) – Ferran Buireu Mar 04 '22 at 17:14

1 Answers1

1

You have a syntax error in your map return. Instead of enclosing it in the curly brackets do something like this.

    {career.thePerson.map((value) => value.info.info )}
Evan Bancroft
  • 26
  • 2