wordpress - StaticQuery Gatsby trouble

Question

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

question from:https://stackoverflow.com/questions/65860303/staticquery-gatsby-trouble

Answer 1

StaticQuery is rendering a component so it expects a valid expression. You need to wrap the statement inside something.

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