React 리액트 - Redux 대체해서 ApolloClient 써보기

React 리액트 - Redux 대체해서 ApolloClient 써보기

 

1. 클라이언트 state에 들어갈 디폴트(스테이트)와 리소버 정의

// defaults는 Graphql문법이 아닌, state  개념이다.
export const defaults = {
  isLoggedIn: Boolean(localStorage.getItem("token")) || false
};
//resolvers의 세번쨰 인자가 의문이네... 두번째 인자도, 기본 리소버랑 다른 매커니즘인듯
export const resolvers = {
  Mutation: {
    logUserIn: (_, { token }, { cache }) => {
      localStorage.setItem("token", token);
      cache.writeData({
        data: {
          isLoggedIn: true
        }
      });
      return null;
    },
    logUserOut: (_, __, { cache }) => {
      localStorage.removeItem("token");
      window.location.reload();
      return null;
    }
  }
};

2. ApolloClient에 clientState 넣기

import ApolloClient from "apollo-boost";
import { defaults, resolvers } from "./LocalState";

export default new ApolloClient({
  uri: "http://localhost:4000",
  clientState: {
    defaults,
    resolvers
  }
});

3. @client를 통해 clientState임을 알려

const QUERY = gql`
  {
    isLoggedIn @client
  }
`;

4. 아폴로 훅을 통해. 데이터를 받아옴.

import { useQuery } from "react-apollo-hooks";

export default () => {
  const {
    data: { isLoggedIn }
  } = useQuery(QUERY);

  return (
    <ThemeProvider theme={Theme}>
        <Router isLoggedIn={isLoggedIn} />
    </ThemeProvider>
  );
};

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA