如何使用 nextjs 开始获取每个应用程序的数据

Question

我有一个用 nextjs 创建的博客应用程序。我想从 api 获取菜单 (nav) 并加载到 Nav 组件。但是我怎样才能在每次刷新时获取菜单并将其保存到反应上下文 api？我尝试从主页获取菜单并将其保存到反应上下文 api，但在其他页面上菜单不可用。

const MyApp = ({ Component, pageProps }) => {
  const [queryClient] = React.useState(() => new QueryClient());

  return (
    <AppProvider>
      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
          <ReactQueryDevtools />
        </Hydrate>
      </QueryClientProvider>
    </AppProvider>
  );
};

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  const response= await apiClient().get('/api/index');

  const { setMenus } = useAppContext(); // This line not working
  setMenus(response.data);

  return { ...appProps };
};

Answer 1

不确定你的策略是什么，但你可以选择任何一种方式，将菜单传递给你的供应商或使用钻孔道具：

const MyApp = ({ Component, pageProps }) => {
  // OR pass those menus to the provider
  const {menus} = pageProps;


  // OR the response already passed to every page entry point at pageProps
  return (
    <AppProvider value={menus}>
      <Component {...pageProps} />
    </AppProvider>
  );
};

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  const response= await apiClient().get('/api/index');
  return { ...appProps, menus: response.data };
};

// Now from every entry page like MenuPage, the menu should be available OR use it as context consumer
const MenuPage = ({menu}) => {...}

如何使用 nextjs 开始获取每个应用程序的数据

How can I fetch data on every app start using nextjs

reactjs

next.js

react-context