wordpress - 如何使用 WordPress 在 NextJS 中管理导航菜单

Question

我正在使用带有 GraphQL 的 headless WordPress 构建 NextJS 应用程序。从文档中不清楚我应该在哪里调用查询来创建站点导航。
https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress
导航由后端的 WordPress 菜单 ( Appearance > Menus ) 动态控制，我可以成功访问这些 menuItems通过 GraphQL 在 index.js 上没有任何问题和 posts/[slug].js Next 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

有几种方法可以做到:

您可以在布局组件内的@apollo/client 中使用 useQuery() 查询 menuItems，以便它可用于包装在布局内的所有页面。然而，这样做的问题是，会有一个加载时间，并且数据不会像我们使用 getServerSideProps() (在页面级别)那样被预取和随时可用。因为这将在组件级别。
import { useQuery } from "@apollo/client";
导出默认函数布局(){
const { 加载，数据 } = useQuery( GET_MENU_QUERY )
返回 {...}
}

您可以使用 swr使用缓存策略。有blog这解释了如何使用它