리액트로 블로그 만들기 #10

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님 반갑습니다.라고 출력해준다.