[Apollo v.3] Reactive variables

Apollo 버전 3 새로운 기능

https://www.apollographql.com/docs/react/local-state/reactive-variables

 

 

Reactive variables

React에서 Apollo Client와 함께 사용하는 variables는 GraphQL 쿼리나 변이를 수행할 때 동적 값을 전달하는 방법이다.

 

 

Variables 사용 개요

• GraphQL 쿼리나 변이에서 동적 파라미터를 받는 부분을 정의한 후, React 컴포넌트에서 해당 변수를 Apollo Client의 useQuery나 useMutation 훅과 함께 전달한다.
• 이렇게 전달된 변수는 쿼리나 변이의 조건을 조정하여 특정 데이터를 가져오거나 수정하는 데 사용된다.

 

 

makeVar는 Apollo Client의 Reactive Variables 기능을 제공하는 함수

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

const cartItemsVar = makeVar([]);

• makeVar을 사용하면 Apollo Client의 캐시 외부에서 클라이언트 전용 상태를 관리할 수 있다.
• 즉, 서버에서 받아온 데이터뿐만 아니라 클라이언트에서 발생하는 상태 변화를 관리하는 데 사용된다.
• 이는 Redux나 Context API 같은 상태 관리 도구를 대체할 수 있는 가벼운 방법이다.

 

 

makeVar의 역할

1. 전역 상태 관리
   • Apollo Client를 사용하여 클라이언트 내에서 전역 상태를 관리할 수 있다.
   • 이때 상태는 Apollo Client의 캐시와 독립적으로 존재하면서도 캐시의 장점을 함께 누릴 수 있다.
     
     
2. 반응형(Reactive)
   • 이 변수는 반응형이기 때문에, 이 변수가 업데이트되면 이를 구독하고 있는 컴포넌트들이 자동으로 리렌더링 된다.
     
     
3. 캐시를 대체하는 상태 관리
   • makeVar은 Apollo 캐시와는 별도로 작동하지만, Apollo Client 내에서 캐시와 유사하게 동작하여 상태 변화를 반영한다.
     
     

 

 

사용 예제

 

Reactive variables

// 참고

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

const cartItemsVar = makeVar([]);

Reactive variables는 애플리케이션의 어디에서나 읽고 수정이 가능하다.

 

 

Reactive variables 기본값 작성

// apollo.ts

import { ApolloClient, InMemoryCache, makeVar } from "@apollo/client";

export const isLoggedInVar = makeVar(false);

export const client = new ApolloClient({
  uri: "<http://localhost:4000/graphql>",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          isLoggedIn: {
            read() {
              return isLoggedInVar();
            }
          }
        }
      }
    }
  })
});

 

 

변수 값 업데이트

// routers/logged-out-router.tsx

import { isLoggedInVar } from "../apollo";

export const LoggedOutRouter = () => {
  return (
    <div>
      <h1>로그아웃 페이지</h1>
      <button onClick={() => isLoggedInVar(true)}>로그인</button>
    </div>
  );
};

 

 

Reactive variables로부터 값 가져오기

// App.tsx

import { useReactiveVar } from "@apollo/client";
import { isLoggedInVar } from "../apollo";
import { LoggedInRouter } from "../routers/logged-in-router";
import { LoggedOutRouter } from "../routers/logged-out-router";

export const App = () => {
  const isLoggedIn = useReactiveVar(isLoggedInVar);
  return isLoggedIn ? <LoggedInRouter /> : <LoggedOutRouter />;
};

Hook을 대신할 수 있다.