GraphQL Apollo를 이용한 상태관리

요약 : GraphQL + Apollo 를 사용하면 Redux 또는 Context API를 대체할 수 있다.

Apollo Client In GraphQL

• Apollo Client란 GraphQL 기반으로 한 상태관리 및 클라이언트에서 GraphQL을 사용해 데이터를 가져오기에 좋은 라이브러리이다.

Reactive Variable 사용

import { makeVar } from '@apollo/client';

const currentUserVar= makeVar(null); // 현재 초기 값 : null

const variable = currentUserVar(); // Getting Reactive Variable

currentUserVar("A new value); // Modifying New Value

• makeVar → Make Reactive Variable
• Reactive Variable을 사용하면 원하는 형태로 저장할 수 있고, 수정이 편리하다는 장점이 존재!
• Reactive Variable가 업데이트되고 나면, 자동으로 쿼리를 다시 실행시켜 컴포넌트들을 리렌더링 시켜준다.

Cache 타입과 Field 정책

• Cache 타입과 Field 정책 정의 → 쿼리를 로컬로 보낼 수 있도록 설정

import { InMemoryCache } from '@apollo/client';
import { currentUserVar} from './reactivities/variable.js';

export const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        currentUserVar: {
          read() {
            return currentUserVar();
          },
        },
      },
    },
  },
});

적용

export const GET_CURRENT_USER = gql`
  query {
    currentUserVar @client
  }
`;

const {loading, error, data} = useQuery(GET_CURRENT_USER);

@client → 서버로 요청하지 않고 로컬로 요청한다.

실습

1. Backend

• GraphQL, Apollo Server를 사용해 GraphQL 서버 구동
• DataBase(Users, Movies) - 로컬
• Schema, Resolver, Context 작성

2. Frontend

• Next.js, GraphQL, Apollo Client
• 로그인 페이지(login), 메인 페이지(index)
• 로그인 페이지 → 이미 로그인이 된 상태라면 메인 페이지로 이동, 그렇지 않다면 로그인 페이지 유지.
  • 아이디 일치 → 메인 페이지 이동 및 반응형 변수에 저장
  • 아이디 불일치 → Alert 함수 실행 및 로그인 페이지 유지
• 메인 페이지 → 로그인이 안된 상태라면 로그인 페이지로 이동, 그렇지 않다면 메인 페이지 유지.

3. Apollo-Client 전역 상태 관리

• 반응형 변수를 사용 → 반응형 변수 상태가 변하면 Apollo-Client는 이 변수 값을 참조하는 모든 로컬 쿼리를 재 실행해서 새로운 상태가 해당 컴포넌트 UI에 반영될 수 있도록 해준다.

Trouble Shooting

• 로그인 페이지에서 로그인을 하고 반응형 변수에 해당 유저 정보를 저장을 했지만, 메인 페이지로 넘어갔을 때, 로컬로 유저 정보를 쿼리로 보내 요청을 하면 Undefined 값이 오는 문제가 발생!

• 해결 → 재우님의 도움으로 해결! cache 정책을 만들어놓고 쓰질 않아서 문제가 발생했던거였다! 단순한 문제였지만 찾는 게 정말 어려웠다..

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import { cache } from "../apollo/cache";

const client = new ApolloClient({
  ssrMode: typeof window === "undefined",
  uri: "http://localhost:4000/graphql",
  cache: cache,
});

const App = ({ Component, pageProps }) => {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
};

export default App;

참고

Reactive Variables In GraphQL Apollo Client - Smashing Magazine

Reactive variables