我正在使用GraphQL和WordPress无头模式构建NextJS应用程序。但是,从文档中无法清楚地知道在哪里调用查询以创建站点导航。站点导航由WordPress菜单(“外观”>“菜单”)在后端动态控制,我可以在Next JS的index.js和posts / [slug] .js页面模板上成功访问这些menuItems,而且没有任何问题。参考链接:https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress。
我遇到的问题是我在每个模板中都重复使用了
欢迎提供任何指导(或示例),关于在NextJS应用程序中存储全局查询(例如动态导航查询)的位置。
// 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应用程序中存储全局查询(例如动态导航查询)的位置。
getInitialProps
是有效的,但 NextJS 文档似乎暗示它很快会被弃用,所以我不太敢使用它。 https://nextjs.org/docs/api-reference/data-fetching/getInitialProps - Darren Cooney"headers": { "cache-control": "s-maxage=1,stale-while-revalidate" },
- hyperdrive