gatsby-source-wordpress: Get menus

Created on 12 Oct 2017  路  17Comments  路  Source: gatsbyjs/gatsby

Hello again,
There was this issue discussing the manner of getting menus and their locations, with @sebastienfi suggesting to use allWordpressWpApiMenusMenusExtended, but the plugin seems to have been updated since (the docs a bit later, which was confusing) because that node no longer exists.
So my question is: Is there, at the moment, any way to fetch the menus of Worpdress? Possibly according to their location? And if not is there an ETA on this feature?

Thank you.

Edit: I have just now noticed that the docs changed. However, with WP Api Menus installed on Wordpress, and the latest Gatsby version running, I can't run the basic example of AllWordpressWpApiMenusMenuLocations. Getting the error Cannot query field \"allWordpressWpApiMenusMenusLocation\" on type \"RootQueryType\". Did you mean \"allWordpressWpApiMenusMenus\", \"wordpressWpApiMenusMenus\", or \"allWordpressWpStatuses\"?

Most helpful comment

@loganfromlogan and others. I found a solution - maybe this applies or can help someone else.

In your gatsby-config.js, make sure you have added menus to your included routes:

{
        resolve: 'gatsby-source-wordpress',
        options: {
        // ...
            includedRoutes: [
                '/*/*/categories',
                '/*/*/posts',
                '/*/*/pages',
                '/*/*/media',
                '/*/*/tags',
                '/*/*/taxonomies',
                '/*/*/users',
               '/*/*/menus'
          ],
       // ...
}

Without that, Gatsby doesn't query the menus at all :)

All 17 comments

Here you go

allWordpressWpApiMenusMenusItems {
    edges {
      node {
        name
        count
        items {
          order
          title
          url
          wordpress_children {
            wordpress_id
            title
            url
          }
        }
      }
    }
  }

Then, in render() :
const siteMenus = this.props.data.allWordpressWpApiMenusMenusItems.edges

Does this gives the data you expected ?

Closing this issue, please reopen if you feel that more information is needed :)

It looks like the routes for the Wordpress plugin have changed?

This seems like the route for me:
/wp-json/wp-api-menus/v2/menus

I've installed the Plugin within Wordpress, but I'm getting "Cannot query field \"allWordpressWpApiMenusMenusItems\" when I try and query it.

Also getting an error from the query above

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

edit: this was fixed by installing the correct plugin, on the right:
plugins

and removing the wordpress_children {} object from the query

I'm using Version 1.3.1 of the WP API Menus plugin. It's activated, but I go into GraphiQL and there are no options for menus. I've searched but don't see anything. The other queries mentioned in this issue don't work. @braco What version where you using when you go this to work? I first installed the V2 Menus plugin, but then removed it and installed the WP API Menus. Doesn't seemed to have helped.

I should also note that the endpoints are available via the REST API, so i'm at a loss as to why I can't see the menus in GraphiQL

And... hours later i run gatsby start and i'm getting all the updated endpoints. @sebastienfi is Gatsby caching this stuff somewhere and is there a way for me to clear that manually instead of waiting for it it happen? I think this is related to #8863.

Having this issue as well: Gatsby 2.4.6/WP API Menus 1.3.1/WP 4.9.8

@braco's fix did not work. Also tried completely deleting the .cache directory and no change.

Here is the error:

 43:9  error  Cannot query field "allWordpressWpApiMenusMenusItems" on type "Query". Did you mean "allWordpressWpTaxonomies", "allWordpressWpUsers", "allWordpressSiteMetadata", "allWordpressWpMedia", or "wordpressWpTaxonomies"?  graphql/template-strings

It doesn't even list a suggested query param for the menu. What is the proper query parameter?

@loganfromlogan and others. I found a solution - maybe this applies or can help someone else.

In your gatsby-config.js, make sure you have added menus to your included routes:

{
        resolve: 'gatsby-source-wordpress',
        options: {
        // ...
            includedRoutes: [
                '/*/*/categories',
                '/*/*/posts',
                '/*/*/pages',
                '/*/*/media',
                '/*/*/tags',
                '/*/*/taxonomies',
                '/*/*/users',
               '/*/*/menus'
          ],
       // ...
}

Without that, Gatsby doesn't query the menus at all :)

Thanks @braco and @joshuaiz , your combined solutions worked for me. However, we should probably move to the WP-REST-API v2 Menus , since it is the most recently update Wordpress plugin. The WP API Menus was updated 2 years ago. Also, https://github.com/postlight/headless-wp-starter uses WP-REST-API v2 Menus

This seems to be still an issue, I don't get allWordpressWpApiMenusMenusItems{} endpoint.

Just getting allWordpressWpApiMenusMenuLocations and allWordpressWpApiMenusMenus.

Got the right version of WP-API-MENUS and the current gatsby version is 2.5.4

Same here @eemeeli. Perhaps this should be reopened?

@paulmasek I noticed that the "problem" for me was, on the WordPress install. I didn't have default main menu on WordPress and had two custom menus. One for main language and for the secondary language. Tested with other WordPress site that had only one menu / default main menu the allWordpressWpApiMenusMenusItems appeared

@eemeeli thanks for that - much appreciated. I do have two custom menus on my wordpress instance and no default one, so perhaps the same issue is occurring for me. Surely a bug though, and a bizarre one at that :/

Including /*/*menus in includedRoutes solve the problem, because before the content of includedRoutes was like that:

includedRoutes: [
  "**/categories",
  "**/posts",
  "**/pages",
  "**/events",
  "**/menu-locations/**",
  "**/media",
],

Nothing has worked for me.
I tried including ///menus in my includedRoutes

@jarrodmedrano see if this helps.

Thanks. @jonniebigodes I eventually got it to work using your post. But I'm not really sure what the problem was.

Was this page helpful?
0 / 5 - 0 ratings