CODEWITHSUNDEEP
javascriptreactjsgraphqlcontentful-api
Sam St Aubyn
Sam St Aubyn

Reputation: 157

Retrieving Array from Contentful GraphQL query for page created by slug build error

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

Upvotes: 0

Views: 957

Answers (1)

Evan Bancroft
Evan Bancroft

Reputation: 26

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 )}

Upvotes: 1

Related Questions