Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
5 replies
Complexlity

How to send cookies and headers in app dir

Hello. I have an index page in the pages directory. I want to do the same thing but using the app dir
const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => {
  const { data } = useSwr(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,
    fetcher,
    { fallbackData }
  );

  if (data) {
    return <div>Welcome! {JSON.stringify(data.name)}</div>;
  }

  return <div className="">{JSON.stringify(fallbackData)}</div>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  console.log({ header: context.req.headers });

  const data = await fetcher(
    `${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`, {
      ...context.req.headers,
    }
  );
  return { props: { fallbackData: data } };
};


Basically, I'm sending a request to an express server. Which verifies the user using their access/refresh token gotten from the request cookies/header.

I want to do the same in in appdir. I tried this:
async function getUser(){
  const data = await fetcher(`${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`);
  //@ts-ignore
  return data | "no-data"
}

export default async function Home() {
  const data = await getUser()
  return (
    <p>Welcome {data.name}</p>
  )
}

But it doesn't send the cookies/headers to the server.
For context. 
fetcher
 is just an axios call to get data
import axios from "axios";

const fetcher = async <T>(url: string, headers = {}): Promise<T | null> => {
  try {
    const { data } = await axios.get<T>(url, {
      headers,
      withCredentials: true,
    });

    return data;
  } catch (e) {
    return null;
  }
};

export default fetcher;
Was this page helpful?