CODEWITHSUNDEEP
arraysreactjsgraphqlgatsby
Nate Simonsen
Nate Simonsen

Reputation: 124

can't query results of graphql query because am using 2 arrays within each other

Here is my map function, I am using react with gatsby.

when I run my graphiql browser, (an IDE graphql playground) I get group as an array, and edges is also an array.

the query is a static query and the mapping function is inside of a class based react component

{group.map(({ edges }) => {
   console.log(group);
     edges.map(index => {
       return <p>Hello</p>
   });
})}

However, the p tags are not displaying anything, but if I console.log("hello") it consoles hello 4 times, anyone got any ideas? I am a little stumped.

the console.log returns 

(3) [{…}, {…}, {…}]
0:
edges: Array(2)
0:
node: {tune: "awesome", title: "Awesome Song", playtime: "2:50", page: "249", filesize: "1.8", …}
__proto__: Object
1:
node: {tune: "awesome", title: "AwesomeSong 2", playtime: "4:05", page: "525", filesize: "2.6", …}
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
1:
edges: Array(1)
0:
node: {tune: "decent", title: "Awesome Song3", playtime: "4:06", page: "719", filesize: "2.4", …}
__proto__: Object
length: 1
__proto__: Array(0)
__proto__: Object
2: {edges: Array(1)}
length: 3
__proto__: Array(0)

Upvotes: 1

Views: 210

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Have you tried something like this?

{group.map(({ edges }) => {
   return edges.map(({node})=> {
       return <p>{node.title}</p>
   });
})}

You need to return something in your first map() loop.

In addition, are you displaying the loop in a render() function? If not, you can't display a <p> tag.

Upvotes: 1

Related Questions