WordPress로 NextJS에서 네비게이션 메뉴를 관리하는 방법

WordPress로 NextJS에서 네비게이션 메뉴를 관리하는 방법

저는 헤드리스 워드프레스와 그래프QL을 이용하여 넥스트JS 앱을 만들고 있습니다.사이트 탐색을 만들기 위해 쿼리를 호출해야 하는 위치가 설명서에서 명확하지 않습니다.https://github.com/lfades/next.js/tree/examples/cms-wordpress/examples/cms-wordpress

탐색은 WordPress Menu(워드 프레스 메뉴)에 의해 동적으로 제어됩니다.Appearance > Menus백엔드에서 성공적으로 액세스할 수 있습니다.menuItems문제없이 그래프QL을 통해index.js그리고.posts/[slug].js다음 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 앱에서 동적 탐색 쿼리와 같은 전역 쿼리가 어디에 있는지에 대한 모든 지침(또는 예)을 감사히 받겠습니다.

다음과 같은 몇 가지 방법이 있습니다.

1. 레이아웃 구성요소 안에 있는 @apollo/client에서 useQuery()로 항목 쿼리를 메뉴화하여 레이아웃 안에 있는 모든 페이지에서 사용할 수 있습니다.그러나 이 문제는 로드 시간이 발생하여 getServerSideProps()(페이지 레벨)처럼 데이터를 프리페치하지 않고 쉽게 사용할 수 있다는 것입니다.이것은 구성요소 수준이 될 것이기 때문입니다.

   "@apollo/client"에서 {useQuery} 가져오기;

   내보내기 기본 기능 레이아웃() {

   const {loading, data } = useQuery( GET_MENU_QUERY) 반환 {...} }

2. 캐싱 전략을 사용하는 swr을 사용할 수 있습니다.사용법을 설명해주는 블로그가 있습니다.

(JD 사이트의 경우) redux와 wpreest로 한동안 이것과 싸웠지만, gql + apollo 클라이언트의 경우 이론이 동일해야 한다고 생각합니다.

App을 확장하는 사용자 지정 클래스로 Next App_app을 재정의해야 합니다.

그리고 HOC를 사용하여 AppContext에 apollo 클라이언트의 인스턴스를 주입해야 할 수도 있습니다.저는 이 포장지를 리덕스에 사용했습니다.그 이후에 모델링해야 합니다.

편집: (누군가가 이미 만든 것 같습니다.)

// export default withRedux(makeStore)(MyApp);
export default withApollo(apolloClient)(MyApp); ???

그런 다음 App getInitialProps에서 쿼리를 만들어 메뉴를 가져올 수 있습니다.기본적으로 apollo 클라이언트 쿼리는 캐시 스토어에 이미 있는 경우 캐시된 값을 가져옵니다.

  static async getInitialProps(appContext) {
    const { isServer,  pathname, apollo? } = appContext.ctx;

    // do menu query
    const menu = apollo.query???

    // Redux version
    // const state = store.getState();
    // let main_menu = state.menu;
    // if (!state.menu) {
    //  const menu = await apiService().getMenu("main");
    //  main_menu = menu;
    //  store.dispatch({ type: "SET_MENU", payload: menu });
    // }

    ...

    // call the page's `getInitialProps` and fills `appProps.pageProps`
    const initialProps = await App.getInitialProps(appContext);

    const appProps: any = {
      ...initialProps,
      menu: main_menu
    };

    return appProps;

  }

이제 메뉴는 앱 구성요소의 페이지 소품에 있으며, 이를 전달할 수 있습니다.
또는 apollo 클라이언트를 사용하여 하위 구성요소에서 쿼리를 다시 만들 수도 있습니다.따라서 헤더든 뭐든 쿼리를 다시 만들면 동일한 쿼리라면 캐시된 응답이 필요합니다.

메뉴 항목과 함께 템플릿 이름 + 포스트 슬러그가 포함된 메뉴에 대한 엔드포인트를 만들고 wp 템플릿을 다음 경로에 매핑했습니다.

const menu = useSelector((state: any) => state.menu);
const menuItems = menu.map((item: any) => {
    const path = getTemplatePath(item.template);
    return (
      <Link key={item.slug} href={`/${path}`} as={`/${item.slug}`} scroll={false}>
        <a>{item.title}</a>
      </Link>
    );
  });

언급URL : https://stackoverflow.com/questions/63495506/how-to-manage-a-navigation-menu-in-nextjs-with-wordpress