React-Apollo-mongoose-JWT

드디어! 아폴로와 몽구스로 jwt 서비스를 (내 나름대로) 만들었다! 전혀 완벽하게 이해하는 발끝에 때만큼도 미치지 못했지만 어쨌든 하나 하나 나열해보자

데이터 베이스

mlab 서비스를 통해서 mongoDB를 대신한다.

데이터 베이스 - 스키마 연결

mongoose로 데이터 모델을 만들고,  graphQL로 만들어 놓은 스카마를 mlab의 접속 경로로 연결한다. 

스키마 작성

graphQL을 이용해서 스키마를 작성한다. MODEL.findOne({name: args.name, password: args.password})를 이용해서 ID(name)과 password가 일치할 경우만 데이터를 가져올 수 있도록 한다.

jwt 삽입

스키마에 jwt 모듈을 사용해서 data입력시 token이 입력되고 mutation에서는 token과 연결된 정보를 불러올 수 있도록 한다. 여기서 query가 아니라 mutation이 매우 매우 중요하다. 나중에 불러와야 할 때 알게 된다.

이쯤 되면 백엔드는 완성이다. 

프론트 엔드를 알아보자

app.js

react-apollo를 이용해서 서버의 데이터를 가져온다. ApolloClient에 서버의 주소를 입력해서 서버와 연결하고 ApolloProvider로 전체에 데이터를 제공한다. ApolloProvider에는 client로 서버와 꼭 연결해 주어야 한다!

query 작성

server 이외에 react에서 사용될 query를 따로 작성해야한다. apollo-boost의 gql을 통해서 작성한다. 꽤 복잡해서 예시로 적는게 좋을 것 같다.

const getTokenMutation = gql`
  mutation GetToken($name: String, $pw: String) {
    token(name: $name, pw: $pw) {
      name
      token  }  }`;

gql' 뒤에 있는 mutation: mutation이면 mutation으로, query면 query로 적는다. 그 뒤에 있는 GetToken은 그냥 이름인 것 같다. GetToken뒤에 있는 괄호는 입력될 변수들과 변수의 값 유형을 적는다. 그리고는 중괄호 안에 내용물을 넣는 것이고 내용물은 'server의 주소/graphql?'에서 값을 가져올 만하게...? 마치 mutation 뒤의 중괄호 안의 내용물과 같이?... 입력한다. 물론 arguments의 값은 그 앞에 괄호 안의 변수로 맞추면 될 것이다. 아마?!

graphql()

원하는 component에 react-apollo의 graphql을 이용해서 ApolloProvider와 연결시킨다. graphql은 마치 redux의 connect와 같다. hoc로써 간편하고 효율적으로 component 별로 데이터에 연결시켜준다. 다만 redux의 connect는 prop으로 dispatch를 보내고 원하는 mutation을 dispatch를 통해서 개별로 사용할 수 있지만, graphql은 미리 입력해둔 mutation 쿼리를 {name: 'xxxxx'}를 통해서 'xxxxx'라는 이름으로 prop에 내릴 수 있다. react측에서 작성해 놓은 쿼리를 불러와서 입력한다.

함수에 적용하기

prop을 통해 내려 받은 mutation을 실행한다. 중요한 것은 진짜 외부에 있는 서버와 같이 (혹은 진짜 외부에 있는 서버라서 그런건지) async, await를 이용해야 한다. 그거 안 했더니만 promise로 읽혀서 아무 것도 할 수 없었다. 

    const res = await this.props.getTokenMutation({
      variables: {
        name: this.state.name,
        pw: this.state.pw  }});

위의 예시를 보면 await가 보이고 aync 부분은 안 가져왔다. 귀찮아서 ㅎㅎ. 아무튼 prop으로 가져온 mutation의 arguments는 variables를 이용해서 위와 같이 입력한다. 그러면 값을 반환하지롱!

이게 끝이다. 이를 통해 반환된 token을 localstorage에 저장하면 될 것이고, token이 있다면 그 값을 보내서 로그인을 할 수 있을 것이다. 이예이!