CODEWITHSUNDEEP
reactjswordpressgraphqlgatsby
fly_oinotna
fly_oinotna

Reputation: 1

Gatsby / Wordpress: map not working when getting data from another table

I'm running into an issue with this application (React/Gatsby + Wordpress as backend). All data are being fetched with GraphQL through gatsby-source-wordpress plugin for Gatsby.

I'm getting all data correctly from Wordpress using Advanced Custom Fields, except when I need to call some data from another table.

productLines.map works properly but not line.prodLineColors.map

These colors (custom post type) are selected in each post and I need to show their content in this loop.

The query seems to be correct and in GraphiQL I'm retrieving all data as wanted.

It doesn't return any error, it returns just an empty loop. The loop is reiterated so much times as much are the selected colors in the post, just without the expected data (i.e. color.colorType). All console.log calls return [object object]

{productLines.map( (line, index) => {
console.log('line.prodLineColors: ' + line.prodLineColors)
return (
    <div key={'colors_' + index}>
        <h4 className>{line.prodLineName}</h4>
        <div className="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6">
            {line.prodLineColors.map( (color, index) => {

                console.log('colors: ' + color)
                console.log('color: ' + color.farben)

                if(color.colorType === 'img') {
                    ... do some img things
                }

            })}
        </div>
    </div>
)

Here's the query:

query($slug: String!) {
  allWpProdukt(filter: { slug: { eq: $slug } }) {
      nodes {
          title
          slug
          productACF {
              prodLines {
                  prodLineColors {
                      ... on WpFarbe {
                          farben {
                              colorHex
                              colorName
                              colorType
                              colorImg {
                                  sourceUrl
                              }
                          }
                      }
                  }
              }
          }
      }
  }

Can someone help me understand this issue? I understand that something is missing between "prodLineColors" and "farben" but I don't know what exactly and I'm not able to find a similar case by searching for issues nor in the documentation.

Any help will be appreciated! Thanks in advance!

Upvotes: 0

Views: 40

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

It looks you have an issue(s) accessing the data.

All console.log calls return [object object]

This happens when you are not accessing the correct object of the array or your position is not something callable as is (objects, arrays, etc).

Nope, allWpProdukt.nodes.productACF.productLines

As I mentioned, you can't do allWpProdukt.nodes.productACF because nodes is an array, so you must access to a specific position or loop through it to get each node. It looks you have several nested loops you're not doing so start checking how your data structure looks like and iterate each position at a time. Something as dummy as:

{

    allWpProdukt.nodes.map(node => <div>{node.title}</div>)

}

Depending on your structure maybe you can omit the nodes and just access to the first position and keep iterating:

 allWpProdukt.nodes[0].productACF.prodLines

Check which kind of data is an object and which is an array to iterate or not, prodLines is likely to be an array as nodes is, as probably prodLineColors and farben are.

Upvotes: 0

Related Questions