use apollo client

Use Apollo Client

mutation과 query를 동시에 할 수 있는 개 쩌는 기술이다

const { setAccessToken, setUserInfo, userInfo } = useContext(GlobalContext);
const { handleSubmit, register } = useForm();

const [loginUser] = useMutation(LOGIN_USER);
const client = useApolloClient(); // useApolloClient import해야함

async function onClickLogin(data) {
    try {
      const result = await loginUser({
        variables: {
          email: data.myEmail,
          password: data.myPassword,
        },
      });
      const accessToken = result.data.loginUser.accessToken;
      const resultUserInfo = await client.query({
        // 어떤 쿼리를 할지
        query: FETCH_USER_LOGGED_IN,
        // accessToken이 없으면 실행이 안되기 때문에
    	// headers를 같이 보내줘야 함
        context: {
          headers: {
            authorization: `Bearer ${accessToken}`, 
          },
        },
      });
      
      const userInfo = resultUserInfo.data.fetchUserLoggedIn; 
      // 글로벌 스테이트에 accessToken , userInfo 저장
      setAccessToken(accessToken); 
      setUserInfo(userInfo);
    } catch (error) {
      alert(error.message);
    }
  }

 return (
    <>
      {userInfo.email ? (
        `${userInfo.name}님 환영합니다`
      ) : (
        <form onSubmit={handleSubmit(onClickLogin)}>
          이메일: <input type="text" {...register("myEmail")} />
          <br />
          비밀번호: <input type="password" {...register("myPassword")} />
          <br />
          <button type="submit">로그인하기</button>
        </form>
      )}
    </>
  );

onClickLogin 으로 먼저 mutation을 요청하면
loginUser가 데이터를 받아오기전까지 기다렸다가
데이터를 받아온다. 로그인하면 accessToken이 들어오게 api가
만들어져 있기 때문에, login하고나서 받아온 accessToken 을
accessToken이라는 변수에 집어넣는다.

그리고나서 추가로 요청하고싶은 부분을 요청하는데,
이때 Use Apollo Client를 쓴다.

use apollo client를 쓰기위해선

import { useApolloClient } from "@apollo/client";

@apollo/client에서 useApooloClient를 import 해준다.

추가로 요청하고 싶은 쿼리를 client.query({}) 안에다 집어넣는다.

const resultUserInfo = await client.query({
        query: FETCH_USER_LOGGED_IN, 
        context: {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        },
      });

fetchUserLoggedIn을 추가적으로 요청하고,
로그인할때 headers의 authorization에 accessToken이 변경 되어야 하기 때문에
받은 accessToken을 다시 새로 넣어준다.

const userInfo = resultUserInfo.data.fetchUserLoggedIn;
setAccessToken(accessToken);
setUserInfo(userInfo);

동시에 요청한 fetchUserLoggedIn의 데이터를 동기적으로 받은다음
글로벌 스테이트에 userInfo를 저장하고 , accessToken도 글로벌 스테이트에
저장 시킨다.

이렇게 하면 어디서든 fetchUserLoggedIn 쿼리를 쓰지 않아도
로그인한 사용자의 데이터를 불러 올 수 있다.