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

Question

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)

Ferran Buireu · Accepted Answer · 2020-06-09 17:00:50Z

1

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.

edited Jun 9, 2020 at 17:00

answered Jun 8, 2020 at 18:59

Ferran Buireu

29.4k7 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nate Simonsen Over a year ago

its in a render function

Nate Simonsen Over a year ago

I am getting really close, so I did what you said, but nothing is displaying... However, I console logged the node, and it returns this

filename: "422 'Twas on That Night When Doomed to Know.mp3" filesize: "2.6" page: "422" playtime: "4:02" title: "'Twas on That Night When Doomed to Know" tune: "good"

Its strange I can't display it with {node.title}, got any Ideas why it isn't working?

Ferran Buireu Over a year ago

Has all your objects exactly the same structure?

Nate Simonsen Over a year ago

so if I console.log (node.title), it returns the titles completely fine. However, I cannot display anything on my webpage, even <p>Hello World</p> is invisible inside of the map function

Ferran Buireu Over a year ago

Can you provide the full component/page that has the loop?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related