---
# System prepended metadata

title: fetcher 함수에 cookie 설정
tags: [tech sharing]

---

# 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`