How can I fetch data on every app start using nextjs

Question

I have a blog application created in nextjs. I want to fetch menus (nav) from the api and load to Nav component. But how can I fetch menus on every refresh and save it to react context api? I have tried fetch menus from home page and save it to react context api, but on other pages menus are not available.

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 };
};

In your example, YOU DON'T NEED CONTEXT since you drilled the props to every Component through pageProps, your response already on every entry page props. Use the response to pass in addition to {...appProps, menus: response.data} — Dennis Vash
– Dennis Vash, Commented Jul 26, 2021 at 8:33
@DennisVash Then, how can I access menus from other components? — Benfactor
– Benfactor, Commented Jul 26, 2021 at 8:39

Dennis Vash · Accepted Answer · 2021-07-26 08:38:57Z

1

Not sure what your stragedy here, but you can go either way, pass the menu to your provider or use the drilled props:

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}) => {...}

answered Jul 26, 2021 at 8:38

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Benfactor Over a year ago

Then, how can I access menus from other components?

Dennis Vash Over a year ago

To which of the methods you refer to? Also I mentioned it in the answer

Benfactor Over a year ago

Thank you. Last question, is this a best way to load menus to navigation that are dynamic?

Dennis Vash Over a year ago

Sounds reasonable solution, "best way" is opinionated.

Benfactor Over a year ago

I tried to get menus from component but it undefined?

Collectives™ on Stack Overflow

How can I fetch data on every app start using nextjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related