I have created a query to retrieve my WordPress navigation menus using the WordPress graphql plugin along with swr, graphql, graphql-request, and next.js on my local files. When I add the query on the wp-grphql section of my site, I am able to successfully retrieve the navigation menu:
query GET_MENU($id: ID!) {
menu(id: $id, idType: NAME) {
count
id
databaseId
name
slug
menuItems {
nodes {
id
databaseId
title
url
cssClasses
description
label
linkRelationship
target
parentId
}
}
}
}
This query works perfectly when I specify the id of Navigation within the GraphiQL plugin like this:
{
"id": "Navigation"
}
Here are the results displayed in WP:
https://i.sstatic.net/wv7EP.png
When I try to fetch the data using the following code, I encounter an issue:
const { data, error } = useSWR([NAVIGATION_QUERY, "Navigation"], fetcher /* , { initialData: page } */)
console.log('data=::::::::', data, error); // error undefined data is { menu: null }
I am unsure of what the problem might be. My only guess is whether I need to authenticate in order to access the nav menus. But if that were the case, I would expect to receive an error instead of a null menu item...
Thank you in advance!