如何使用 WordPress 管理 NextJS 中的导航菜单

Question

我正在使用带有 GraphQL 的无头 WordPress 构建 NextJS 应用程序。从文档中不清楚我应该在哪里调用查询来创建站点导航。 https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress

导航由Appearance > Menus后端的 WordPress 菜单 ( ) 动态控制，我可以通过 GraphQL 成功访问这些菜单，而Next JS 中的页面模板menuItems不会出现任何问题。index.jsposts/[slug].js

// index.js
export default function Index({ primaryMenu = [] }) {
   return (
     <Layout>
         <Header> 
          {primaryMenu.map((item, index) => {
             return (<a href={item.url}>{item.label}</a>)
          )}
         </Header>
     </Layout>
   );

}

export async function getStaticProps() {
  const primaryMenu = await getPrimaryMenu(); // Get menu via GraphQL
  return {
    props: { primaryMenu },
  };
}

我遇到的问题是我getStaticProps在每个模板上重复该函数，并且我应该能够为此使用某种全局查询，无论是在<header/>组件本身还是在其他方法中。我无法找到有关如何执行此操作的文档，并且它在组件中不起作用。

任何有关全局查询（例如动态导航查询）在 NextJS 应用程序中的位置的指导（或示例）都值得赞赏。

Answer 1

有几种方法可以做到这一点：

1. 您可以使用 useQuery() 从布局组件内的 @apollo/client 查询 menuItems，以便它可用于布局内包装的所有页面。然而，这样做的问题是，将会有一个加载时间，并且数据不会像我们使用 getServerSideProps() （在页面级别）那样预取和随时可用。因为这将是在组件级别。

   从“@apollo/client”导入{useQuery}；

   导出默认函数Layout() {

   const { 加载，数据 } = useQuery( GET_MENU_QUERY ) return {...} }

2. 您可以使用使用缓存策略的swr 。有博客解释了如何使用它