[gatsby-source-wordpress] Get menu items (wordpressWpApiMenusMenus)

[benjamingeorge]

When using this query

{
  wordpressWpApiMenusMenus(ID : {eq : 2}){
    ID
    name
    slug
    description
    count
    meta{
      links{
        self
      }
    }
  }
}

I get this result which is correct but it doesn't have the menu "items" array

{
  "data": {
    "wordpressWpApiMenusMenus": {
      "ID": 2,
      "name": "Main",
      "slug": "main",
      "description": "",
      "count": 2,
      "meta": {
        "links": {
          "self": "http://testwordpress.dev/wp-json/wp-api-menus/v2/menus/2"
        }
      }
    }
  }
}

when going to the self URL ("http://testwordpress.dev/wp-json/wp-api-menus/v2/menus/2") in a browser the JSON does include the items

{
"ID": 2,
"name": "Main",
"slug": "main",
"description": "",
"count": 2,
"items": [
{
"id": 6,
"order": 1,
"parent": 0,
"title": "Home",
"url": "http://testwordpress.dev/home/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 4,
"object": "page",
"object_slug": "home",
"type": "post_type",
"type_label": "Page"
},
{
"id": 7,
"order": 2,
"parent": 0,
"title": "Sample Page",
"url": "http://testwordpress.dev/sample-page/",
"attr": "",
"target": "",
"classes": "",
"xfn": "",
"description": "",
"object_id": 2,
"object": "page",
"object_slug": "sample-page",
"type": "post_type",
"type_label": "Page"
}
],
"meta": {
"links": {
"collection": "http://testwordpress.dev/wp-json/wp/v2/menus/",
"self": "http://testwordpress.dev/wp-json/wp/v2/menus/2"
}
}
}

I tried adding items prop to the query but I get an error. I guess my question is how do you query wordpressWpApiMenusMenus and get the actual menu items ? I'm new to GraphQL so I don't know if i'm missing another step.

[KyleAMathews]

@sebastienfi any idea?

[sebastienfi]

@benjamingeorge For some reason the WP-API-Menus Wordpress plugin does not give the menu items on its main API endpoint. Another call is necessary. To cover this use case I updated the gatsby-source-wordpress plugin so it will browse the _link JSON attribute given by the main menus endpoint, and build an "extended" object with its result.

We have to wait for this PR to pass, then you'll have to update using npm i and "gatsby-source-wordpress": "latest", in your package.json.
#1620

You will then have the menus using this GaphQL request. I updated the documentation #1619

  allWordpressWpApiMenusMenusExtended {
    edges {
      node {
        name
        count
        items {
          order
          title
          url
        }
      }
    }
  }

In your page render() method :
const siteMenus = this.props.data.allWordpressWpApiMenusMenusExtended.edges

Then you could use filter to target the menu of your choice using its name (which may be better than using its ID) :
siteMenus.filter(menu => menu.node.name === 'the_name_of_my_menu')[0].node.items

[sebastienfi]

It has been merged thanks to @KyleAMathews
@benjamingeorge running npm update you should be able to use the mentionned GraphQL query.

[benjamingeorge]

looks like there is an issue in the latest release. When I upgrade I get this error when running a build.

Fetching the JSON data from 14 valid API Routes...

Extended node content http://testwordpress.dev/wp-json/wp-api-menus/v2/menus
⢀ source and transform nodes
Extended node content http://testwordpress.dev/wp-json/wp-api-menus/v2/menus/2

Plugin gatsby-source-wordpress returned an error:

TypeError: createNode is not a function
    at createGraphQLNode ([****]/node_modules/gatsby-source-wordpress/gatsby-node.js:637:3)
    at _callee3$ ([****]/node_modules/gatsby-source-wordpress/gatsby-node.js:143:20)

[sebastienfi]

That should be fixed now.

@KyleAMathews : thinking about having the right to close issues...

[benjamingeorge]

Yes the newest release fixed this issue. Thank you.

[benjamingeorge]

The initial issue is fixed however this only returns the top level items. Wordpress menus can have children of children so it should be recursive. I'm unsure if GraphQL is capable of this. In addition this might be a bigger feature request....let me know if I should create a different issue.

[meetbryce]

This isn't working for me on Gatbsy v2.x

The query is totally unrecognised by the graphiQL.

{
  "errors": [
    {
      "message": "Cannot query field \"allWordpressWpApiMenusMenusExtended\" on type \"Query\". Did you mean \"allWordpressWpComments\" or \"allWordpressWpStatuses\"?",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ]
    }
  ]
}

Here's the source for reference: https://www.bryceyork.com/wp-json/wp-api-menus/v2/menus/

[meetbryce]

Ended up brute forcing it. I'll be making a PR to update the docs to include some examples for working with WP-API-MENUS.

allWordpressWpApiMenusMenusItems (filter: {slug: {eq: "mainmenu"}}) {
  edges {
    node {
      name
      items {
        title
        url
        type
      }
    }
  }
}