Theo's Typesafe Cult•2y ago

How to App.getInitialProps in CT3A?

Heyah - Im trying to use jotai to set an atom read from cookie (sidebar state and color scheme) but I have no clue if Im doing it with typesafety and passing the right session prop

const MyApp = ({
  Component,
  pageProps: { session, showSidebar, ...pageProps },
}: AppProps<{ session: Session | null; showSidebar: boolean }>) => {
  const setShowSidebar = useSetAtom(showSidebarAtom);

  useEffect(() => {
    setShowSidebar(showSidebar);
    console.log(showSidebar);
  }, [setShowSidebar, showSidebar]);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

MyApp.getInitialProps = async (appContext: AppContext) => {
  const ctx = appContext.ctx;

  const appProps = await App.getInitialProps(appContext);
  const session = await getSession({ req: ctx.req });

  const showSidebarCookie = getCookie("showSidebar", ctx);
  const showSidebar =
    showSidebarCookie === undefined ? true : showSidebarCookie;

  return {
    ...appProps,
    pageProps: {
      session,
      showSidebar,
    },
  };
};

const MyApp = ({
  Component,
  pageProps: { session, showSidebar, ...pageProps },
}: AppProps<{ session: Session | null; showSidebar: boolean }>) => {
  const setShowSidebar = useSetAtom(showSidebarAtom);

  useEffect(() => {
    setShowSidebar(showSidebar);
    console.log(showSidebar);
  }, [setShowSidebar, showSidebar]);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

MyApp.getInitialProps = async (appContext: AppContext) => {
  const ctx = appContext.ctx;

  const appProps = await App.getInitialProps(appContext);
  const session = await getSession({ req: ctx.req });

  const showSidebarCookie = getCookie("showSidebar", ctx);
  const showSidebar =
    showSidebarCookie === undefined ? true : showSidebarCookie;

  return {
    ...appProps,
    pageProps: {
      session,
      showSidebar,
    },
  };
};

8 Replies

Shoodey•2y ago

Also, is this even the best way of doing it? It is important that the states are remembered across visits

Valhalaar•2y ago

It's pretty common to put things like color scheme decision in local storage I don't think I've seen it written to a cookie before. You could do that, but seems a bit heavy handed for something like that If the only thing you're saving about the sidebar is whether it's open or not I'd just stick that in localStorage too

Shoodey•2y ago

Thanks a lot for quick reply - Would the answer change if i also need to store the colorScheme too and a json object (or at least an ID of ID to refetch it from DB?)

Valhalaar•2y ago

colorScheme and isDrawerOpen or w/e can go in localstorage on problem as far as I'm concerned I wouldn't put large JSON objects in localStorage what kind of ID? what is this thing you want to refetch?

Shoodey•2y ago

basically the user can manage multiple Xs, and I want them to get back the last X they managed I ve been trying to use localstorage for a while now and i guess hydration is a problem now... zzzz i guess i just have to use hasMounted but now i got it working with both localStorage and cookies, im just not sold on why use one over the other - ill just have to read more about the 2 i guess - it just feels that using cookies is way more DX friendly

Valhalaar•2y ago

It’s not that you can’t use cookies I just don’t like using cookies if I don’t have to. If you find it’s easier to then go for it It does mean you have that information on the server on the initial request so maybe that means you can send down the exact stuff the user needs from the server without having to do something client side

Shoodey•2y ago

Ok so in summary, if anyone reads this - I ended up simply using jotai with localStorage and a custom useHasMounted hook

// store.ts
export const showSidebarAtom = atomWithStorage("showSidebar", true);

// store.ts
export const showSidebarAtom = atomWithStorage("showSidebar", true);

// hooks.tsx
const useHasMounted = () => {
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
};

// hooks.tsx
const useHasMounted = () => {
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => {
    setHasMounted(true);
  }, []);
  return hasMounted;
};

// header.tsx
const hasMounted = useHasMounted();
const [showSidebar, setShowSidebar] = useAtom(showSidebarAtom);
if (!hasMounted) {
  return null;
}
// rest of my header component...

// header.tsx
const hasMounted = useHasMounted();
const [showSidebar, setShowSidebar] = useAtom(showSidebarAtom);
if (!hasMounted) {
  return null;
}
// rest of my header component...

I find this to be very clean and it has the great advantage to sync across tabs and windows 😄 - Thanks again @Valhalaar

barry•2y ago

yh im pretty sure getInitialProps on App will do ssr for every page no matter what

Gaming

Programming

How to App.getInitialProps in CT3A?