GraphQL mutation: MenuCreate: resourceId: for "FRONTPAGE"

GraphQL Admin API Troubleshooting
1

Hello Shopify Team.

Im trying to use the graphql call MenuCreate. I’m trying to add a home page menu item and having trouble finding the resourceId for type: “FRONTPAGE”. I’v tried the graphql call with the resource Id leading to an error: “Invalid Global ID”, and I removed the resrouced Id leading to this result:

{
  "data": {
    "menuCreate": {
      "menu": null
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 12,
      "actualQueryCost": 10,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1990,
        "restoreRate": 100
      }
    }
  }
}

So that brings into question. Does shopify have global id’s for FRONTPAGE, and COLLECTIONS?

TO NOTE: I’v tried adding and removing the resource ID from menu item “type”: “FRONTPAGE”.
Here is my example graphQL call:

mutation CreateMenu($title: String!, $handle: String!, $items: [MenuItemCreateInput!]!) {
  menuCreate(title: $title, handle: $handle, items: $items) {
    menu {
      id
      handle
      items {
        id
        title
        items {
          id
          title
        }
      }
    }
  }
}

{
  "title": "INxSQL Menu",
  "handle": "inxsql-menu",
  "items": [
    {
      "title": "Products",
      "type": "COLLECTIONS",
      "items": [
        {
         "title": "AIRCRAFT & Stuff",
          "type": "COLLECTION",
          "resourceId": "gid://shopify/Collection/497726357784" 
        }
      ]
    },
    {
      "title": "Home",
      "type": "FRONTPAGE",
      "items": [],
      "url": "/",
      "resourceId": ""
    }
  ]
}
1 Like
2

Hey @Jordan_Khalil!

I tested this in my own store and can confirm that FRONTPAGE menu items don’t need a resourceId. When creating a menu item with type FRONTPAGE, the resourceId should be omitted entirely, not set as an empty string.

Here’s a working example of the mutation:

mutation MenuCreate {
  menuCreate(
    title: "TestMenu"
    items: { title: "Home", type: FRONTPAGE }
    handle: "TestMenu"
  ) {
    menu {
      handle
      id
      title
      items(limit: 10) {
        id
        resourceId
        title
        type
        url
      }
    }
  }
}

This returns:

{
  "data": {
    "menuCreate": {
      "menu": {
        "handle": "testmenu",
        "id": "gid://shopify/Menu/297795977238",
        "title": "TestMenu",
        "items": [
          {
            "id": "gid://shopify/MenuItem/739719020566",
            "resourceId": null,
            "tags": [],
            "title": "Home",
            "type": "FRONTPAGE",
            "url": "/"
          }
        ]
      }
    }
  }
}

The url parameter is automatically set to “/” for FRONTPAGE items, so you don’t need to specify it in your input either. For your COLLECTIONS type, if your menu is going to all collections it will be the same as above, but if you’re linking to individual collections then you add the resourceID of the collection.

Hope that help!

3

Thank you brother. Your solution solved my issue.

For documentation here is my successful solution.

mutation CreateMenu($title: String!, $handle: String!, $items: [MenuItemCreateInput!]!) {
  menuCreate(title: $title, handle: $handle, items: $items) {
    menu {
      id
      handle
      items {
        id
        title
        items {
          id
          title
        }
      }
    }
  }
}

variables

{
  "title": "INxSQL Menu",
  "handle": "inxsql-menu",
  "items": [
    {
      "title": "Products",
      "type": "COLLECTIONS",
      "items": [
        {
         "title": "AIRCRAFT & Stuff",
          "type": "COLLECTION",
          "resourceId": "gid://shopify/Collection/497725112600" 
        },
        {
          "title": "Home",
          "type": "FRONTPAGE"
        }
      ]
    }
  ]
}

response:

{
  "data": {
    "menuCreate": {
      "menu": {
        "id": "gid://shopify/Menu/291241754904",
        "handle": "inxsql-menu",
        "items": [
          {
            "id": "gid://shopify/MenuItem/726656155928",
            "title": "Products",
            "items": [
              {
                "id": "gid://shopify/MenuItem/726656188696",
                "title": "AIRCRAFT & Stuff"
              },
              {
                "id": "gid://shopify/MenuItem/726656221464",
                "title": "Home"
              }
            ]
          }
        ]
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 12,
      "actualQueryCost": 12,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1988,
        "restoreRate": 100
      }
    }
  }
}
4

Thanks for sharing the example working for you! That will definitely help other developers with similar questions in the future.

1 Like