Get Menu Items from REST API (React)

Question

I'm a bit rusty on the WordPress since version 5.9 but I can see that they've added Menus to the REST API and we can use new get methods in: wp.data.select("core").

I'm trying to get the menu items from a menu called 'legal', which has the ID 449. How do we use these new functions to get those menu items for use in custom blocks?

.getMenu(449)

Returns the legal menu object not including any menu items/links ???

{
    "id": 449,
    "description": "",
    "name": "Legal",
    "slug": "legal",
    "meta": [],
    "locations": [
        "legal_menu"
    ],
    "auto_add": false,
    "_links": {
        "self": [
            {
                "href": "http://example.com/wp-json/wp/v2/menus/449"
            }
        ],
        "collection": [
            {
                "href": "http://example.com/wp-json/wp/v2/menus"
            }
        ],
        "about": [
            {
                "href": "http://example.com/wp-json/wp/v2/taxonomies/nav_menu"
            }
        ],
        "wp:post_type": [
            {
                "href": "http://example.com/wp-json/wp/v2/menu-items?menus=449"
            }
        ],
        "wp:menu-location": [
            {
                "embeddable": true,
                "href": "http://example.com/wp-json/wp/v2/menu-locations/legal_menu"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https://api.w.org/{rel}",
                "templated": true
            }
        ]
    }
}

.getMenuItem()

No idea how to use this ??

.getMenuItems()

No idea how to use this ??

Can anyone help to fill in the gaps please?

Answer 1

getMenu() fetches data from the GET /wp/v2/menus/<id> endpoint, whereas getMenuItem() fetches data from the GET /wp/v2/menu-items/<id> endpoint, but they have the same usage syntax, where you just need to pass the ID of a menu or menu item.

As for getMenuItems() and another function you can use — getMenus(), the endpoints are GET /wp/v2/menu-items (for fetching menu items) and GET /wp/v2/menus (for fetching menus), respectively. These functions have the same syntax, where you can pass an object containing the arguments accepted by their respective REST API endpoint, but these arguments are optional and when the function is called without any arguments specified (e.g. getMenuItems()), all menu items or menus will be returned.

• You can find the list of accepted arguments by visiting <your site URL>/wp-json/wp/v2 and check the args property for the above endpoints. For example, using your browser console, run fetch( '/wp-json/wp/v2' ).then( res => res.json() ).then( data => console.log( data ) ) while viewing your site's homepage or maybe an admin page, and you'd see something like so for the menu items endpoint:

  

  Or in the above case where the endpoint index is 0, this JS will easily show you the arguments..

  fetch( '/wp-json/wp/v2' ).then( res => res.json() ).then( data => console.log( data.routes['/wp/v2/menu-items'].endpoints[0].args ) )

Examples:

• getMenu( 449 ) — get the data (a menu object like the one in your post) for the menu with the ID 449

• getMenuItem( 456 ) — get the data (a menu item object) for the menu item with the ID 456

• getMenuItems( { menus: 449 } ) — get the menu items for the menu with the ID 449

• getMenus( { search: 'legal' } ) — search for a menu where for example the title contains legal