How to avoid duplicate code in getServerSideProps?

Hey guys, sort of off-topic but lets say I have multiple components with getServerSideProps like this:

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session)
    return {
      notFound: true,
    };

  const { data: customers, error } = await supabase
    .from("customer")
    .select("*");
  if (error) throw new Error(error.message);
  return {
    props: {
      customers,
    },
  };
};

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session)
    return {
      notFound: true,
    };

  const { data: customers, error } = await supabase
    .from("customer")
    .select("*");
  if (error) throw new Error(error.message);
  return {
    props: {
      customers,
    },
  };
};

Is there a way I can avoid having to duplicate the portion:

  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session)
    return {
      notFound: true,
    };

  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session)
    return {
      notFound: true,
    };

every single time I want to check for a session?

7 Replies

awexis•2y ago

Make a function

DYELbrahOP•2y ago

I'm fairly new with NextJS I figured I could have a sort of hook I could call. However my understanding is that you can't use hooks in getServerSideProps?

awexis•2y ago

Nah. You can just make a function that takes in whatever and passed back whatever. Doesnt seem like you are using hooks in your code

DYELbrahOP•2y ago

Perhaps my understanding on what a hook is, is wrong. I just setup a function to verify the user and it worked 🙂 new function

const verifyUser = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();
  return session;
};

const verifyUser = async (ctx: GetServerSidePropsContext) => {
  const supabase = createServerSupabaseClient(ctx);
  const {
    data: { session },
  } = await supabase.auth.getSession();
  return session;
};

now components can be called like this:

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const session = await verifyUser(ctx);
  if (!session)
    return {
      notFound: true,
    };

  const { data: customers, error } = await supabase
    .from("customer")
    .select("*");
  if (error) throw new Error(error.message);
  return {
    props: {
      customers,
    },
  };
};

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const session = await verifyUser(ctx);
  if (!session)
    return {
      notFound: true,
    };

  const { data: customers, error } = await supabase
    .from("customer")
    .select("*");
  if (error) throw new Error(error.message);
  return {
    props: {
      customers,
    },
  };
};

awexis•2y ago

Nice 👍🏼

Unknown User•2y ago

Message Not Public

DYELbrahOP•2y ago

Nice! Thank you again!

Gaming

Programming

How to avoid duplicate code in getServerSideProps?