Я использую Gatsby в качестве внешнего интерфейса для внутреннего интерфейса WordPress. Я успешно получил пункты меню, но теперь мне нужно связать их со страницами, которые я создал. Я добавил ссылки меню в свой Gatsbyconfig.js, но понятия не имею, как я могу сопоставить их с элементами меню одновременно с самим меню. В итоге они противоречат друг другу. Возможно ли это сделать? Я совсем новичок в graphQL. Никогда не трогал его до этого проекта. Ниже приведен запрос GraphQl
{
allWpMenuItem(filter: {menu: {node: {name: {eq: "Navigation Menu"}}}}) {
edges {
node {
label
}
}
}
site {
siteMetadata {
title
menuLinks {
name
link
}
}
}
}
Метка содержит имя для каждого меню, а ссылка содержит ссылку на страницы, которые я создал. Я пытаюсь исправить это в этом фрагменте кода
<div>
{props.allWpMenuItem.edges.map(edge =>(
<a href = "#" key = {edge.node.label}>
{edge.node.label}
</a>
))}
</div>
Я пытаюсь запросить ссылки меню, чтобы изменить тег привязки на элемент ссылки, а затем указать его на ссылку меню.
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
Короткий ответ: вы не можете, изначально каждый запрос является отдельной сущностью. Тем не менее, вы можете комбинировать запросы, используя createResolvers , для более подробной информации смотрите: https://github.com/gatsbyjs/gatsby/discussions/28275 (спасибо LekoArts за отзыв).
Однако у вас есть несколько способов обойти это ограничение. Учитывая, что каждый запрос преобразуется в отдельный объект JavaScript, вы всегда можете манипулировать ими, используя встроенную фильтрацию JavaScript или делая все, что вам нужно. Идея состоит в том, чтобы создать пустой объект и заполнить его ссылками и метками в одном цикле или с использованием двух разных, а затем в вашем компоненте выполнить итерацию по этому объекту вместо props, как вы делаете сейчас.
Я не могу создать минимальный пример, не зная внутренней структуры или не зная, что внутри menuLinks.name.
Кстати, если вы используете внутреннюю навигацию, я бы вряд ли предложил использовать компонент <Link>, среди прочего, использование @reach/router (расширенного от маршрутизатора React) будет отображать только необходимые части каждого компонента, создавая более плавную навигацию, чем используя собственный тег привязки, который обновит всю страницу.