# fetcher 함수에 cookie 설정

### client side
- credentials 속성과 mode 속성을 주고 graphqlClient를 생성하면 자동으로 cookie가 설정되어 요청을 보낸다.
(graphQLClient는 graphql-request 내부에 있다!) [참고](https://www.npmjs.com/package/graphql-request#authentication-via-http-header)

 graphQLClient = new GraphQLClient("http://localhost:3001/graphql", {
    credentials: "include",
    mode: "cors",
  });

### server side

export const getServerSideProps = async ({ req, res }) => {
  const jwt = new Cookies(req, res).get("jwt");
  // req와 res로 부터 cookies를 만들고 jwt라는 이름의 쿠키를 받아온다.
  const client = getGraphQLClient();
  const data = await client.request(
    "query{movie_list{_id}}",
    { word: "123" },
    {
      cookie: `jwt=${jwt}`,
    }
  );
  client를 통해 요청을 보낼때 headers의 cookies에 담아 보낸다
  return {
    props: {preFetchData:data},
  };
};

위처럼 serversideProps로 받아온 데이터를 아래와 같이 사용할 수 있다.

const Home = ({preFetchData}) => {
const {data} = useSWR([query,...variables],fetcher, {initialData:preFetchData})
}

### API 서버 측면
- req.cookies 의 토큰으로 인증하여 context로 넘겨주면 될 것 같다.

###### tags: `tech sharing`