React로 블로그 만들기 #10
- 로그인 구현(7) 프론트엔드 연동 -
1. ApolloClient
- 앞서 만든 백엔드(GraphqQL, MongoDB)와 프론트엔드(React)를 연동하기 위해 ApolloClient를 사용함.
- 간단하게 백엔드 uri만 적으면 클라이언트를 자동으로 생성해준다.
- 패키지 설치 : yarn add react-apollo apollo-boost
- 참조 : http://www.apollographql.com/docs/react/
1) src/apollo.js
- apolloclient를 생성한 뒤, now를 통해 배포된 백엔드 주소를 입력해줌.
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: "https://blogql-pfuypccxcr.now.sh"
});
export default client
2) src/queries.js
- graphql 문법을 사용하기 위해 패키지 설치 : yarn add graphql-tag
- 백엔드에서 만들었던 login mutation 그대로 프론트엔드에서 사용할 mutation을 만들어준다.
- login에 성공했을 시, 반환 받는 변수는 id, name, provider이다.
import gql from 'graphql-tag';
// Sign up
export const login = gql`
mutation login($id: String!, $name: String!, $provider: String!){
login(id: $id, name: $name, provider: $provider) {
id,
name,
provider,
}
}
`;
3) src/Component/Login.js
- 위에서 만들었던 Login Mutation을 Login Component와 compose한다. => 패키지 설치 compose, withRouter
- 그리고 doSignUp 함수를 실행할 때, Login Mutation을 실행하도록 로직 수정한다.
- state에 저장했던 id, name, provider를 가져와 Graphql을 통해 백엔드로 보내준다.
- 그리고 반환값이 있는 경우, 세션에 정보를 저장한다.
import React, { Component } from 'react';
import { GoogleLogin } from 'react-google-login';
import KakaoLogin from 'react-kakao-login';
import styled from 'styled-components';
import { graphql, compose } from 'react-apollo';
import { login } from '../queries';
import { withRouter } from "react-router-dom";
class Login extends Component {
...
// Login Mutation
doSignUp = async () => {
const { id, name, provider } = this.state;
const user = await this.props.LoginMutation({
variables: {
id: String(id),
name,
provider
}
});
if(user.data.login) {
window.sessionStorage.setItem('id', id);
window.sessionStorage.setItem('name', user.data.login.name);
window.sessionStorage.setItem('provider', provider);
this.props.onLogin();
this.props.history.push('/');
}
else
alert("로그인에 실패하셨습니다.");
}
...
export default compose(
graphql(login, { name: 'LoginMutation'})
)(withRouter(Login));
4) 실행 결과
- 로컬스토리지에 저장된 이름을 사용하여 OO님 반갑습니다.라고 출력해준다.
