javascript - set cookie before running fetch in getInitialProps

Question

I have a Next.js app, I'm using getInitialProps in my _app.js in order to be able to have persistent header and footer. However, I'm also needing to set data in a Context, and I need to be able to fetch the data based off of a cookie value. I've got the basics working just fine, however my _app sets the cookie on the first load, and then when I refresh the page it pulls in the appropriate data. I'm wondering if there's a way to be able to set the cookie first before fetching the data, ensuring that, if there's a cookie present, it will always pull in that data on the first load? Here is my _app.js, and, while I'm still working on the dynamic cookie value in my cookies.set method, I'm able to fetch the right data from my Prismic repo by hard-coding sacramento-ca for now, as you'll see. All I'm really needing is the logic to ensure that the cookie sets, and then the data fetches.

_app.js

import React from 'react';

import { AppLayout } from 'components/app-layout/AppLayout';
import { Footer } from 'components/footer/Footer';
import { Header } from 'components/header/Header';
import { LocationContext } from 'contexts/Contexts';
import Cookies from 'cookies';
import { Client } from 'lib/prismic';
import NextApp, { AppProps } from 'next/app';
import 'styles/base.scss';
import { AppProvider } from 'providers/app-provider/AppProvider';

interface WithNavProps extends AppProps {
  navigation: any;
  location: string;
  dealer?: any;
  cookie: string;
}

const App = ({ Component, pageProps, navigation, dealer }: WithNavProps) => {
  const { Provider: LocationProvider } = LocationContext;
  const locationData = dealer ? dealer : null;

  return (
    <LocationProvider value={{ locationData }}>
      <AppProvider>
        <AppLayout>
          <Header navigation={navigation} location={dealer} />
          <Component {...pageProps} />
          <Footer navigation={navigation} />
        </AppLayout>
      </AppProvider>
    </LocationProvider>
  );
};

export default App;

App.getInitialProps = async (appContext: any) => {
  const appProps = await NextApp.getInitialProps(appContext);
  const cookies = new Cookies(appContext.ctx.req, appContext.ctx.res);

  try {
    cookies.set('dealerLocation', 'sacramento-ca', {
      httpOnly: true,
    });

    const { data: navigation } = await Client.getByUID('navigation', 'main-navigation', {
      lang: 'en-us',
    });

    const results = await Client.getByUID('dealer', cookies.get('dealerLocation'), {
      lang: 'en-us',
    });

    return {
      ...appProps,
      navigation,
      dealer: results,
    };
  } catch {
    const { data: navigation } = await Client.getByUID('navigation', 'main-navigation', {
      lang: 'en-us',
    });
    return {
      ...appProps,
      navigation,
    };
  }
};

question from:https://stackoverflow.com/questions/65946802/set-cookie-before-running-fetch-in-getinitialprops

Answer 1

Waitting for answers