StaticQuery trouble

[zack-rose]

I am running a StaticQuery as follows :

<StaticQuery query={graphql`

query MyQuery {
allWordpressWpApiMenusMenusItems {
edges {
node {
id
name
items {
title
object_slug
}
}
}
}
}
`} render={data => (

  {data.allWordpressWpApiMenusMenusItems}
//   {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
//       item => (
//          <div to={`/${item.object_slug}`} key={item.title}>
//               {item.title}
//          </div> 
//       )
//   )}

)} />

but I am getting the following error, even though I believe my graphQL query is accurate as it works in the IDE

Generating development JavaScript bundle failed

/Users/Zack/Desktop/wp-gatsby/beautiful-gatsby-site/src/components/MainMenu.js:
Unexpected token, expected "," (26:11)

24 | `} render={data => (
25 |

26 | {data.allWordpressWpApiMenusMenusItems}
| ^
27 | // {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
28 | // item => (
29 | // <div to={/${item.object_slug}} key={item.title}>

File: src/components/MainMenu.js:26:11
Does anyone know why this is happening/ what I can do to resolve?

Thank you

[herecydev]

The formatting is really messed up so it's a little unclear, but I think your issue is in the render component:

render={data => (
  {data.allWordpressWpApiMenusMenusItems}
//   {props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
//       item => (
//          <div to={`/${item.object_slug}`} key={item.title}>
//               {item.title}
//          </div> 
//       )
//   )}

That render function looks wrong, but it's hard to know what you are trying to do. Start with the simplest thing and build outwards:

      render={data => (
        <div>
          {JSON.stringify(data)}
        </div>
      )}

[zack-rose]

Yeah good point, I've managed to get this so now I need to pull out the title of each one

If I try to render for example {allWordpressWpApiMenusMenusItems.edges[0].name} its giving me an error
'28:12 error 'allWordpressWpApiMenusMenusItems' is not defined' but in the screenshot I am pretty certain it is there?

Am I trying to call it incorrectly?

Thank you

[zack-rose]

Also for example if I try to call the second title with

{allWordpressWpApiMenusMenusItems.edges[1].node.items[0].title}

I'm getting 28:12 error 'allWordpressWpApiMenusMenusItems' is not defined no-undef, but I think it is?

[zack-rose]

Okay I managed it with {data.allWordpressWpApiMenusMenusItems.edges[1].node.items[0].title}

Which I need to make more dynamic but anyway, thank you you helped me solve

[herecydev]

If you make your query like:

query MyQuery {
  allWordpressWpApiMenusMenusItems {
    nodes {
      id
      name
      items {
      title
      object_slug
    }
  }
}

You can then just do data.allWordpressWpApiMenusMenusItems.nodes.map(menuItem => menuItem.name)

The nodes is just a shortcut to what you're trying to do!