wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 함수의 범위
  • 초기 환경설정
  • gridhelper
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 디자인 패턴
  • 함수 표현식
  • math.cos()
  • 스코프
  • Interface
  • API
  • e.preventdefault()
  • getelapsedtime()
  • getdelta()
  • 원형적인 움직임
  • 렌더링 성능 최적화
  • type-graphql
  • 함수 리터럴
  • math.sin()
  • three.js 구성 요소
  • Decorators
  • 삼각함수
  • 데이터 포맷
  • reactive variables
  • 함수 선언문
  • react 성능 최적화
  • joi 에러
  • axeshelper
  • mapped types
  • 오프-프레미스(off-premise) 방식
  • isabstract

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

[Apollo v.3] Reactive variables
Frontend/Apollo

[Apollo v.3] Reactive variables

2024. 9. 6. 05:22

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을 대신할 수 있다.

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Apollo' 카테고리의 다른 글

useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출  (0) 2024.10.15
GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기  (0) 2024.10.01
Apollo Link 개요와 주요 기능  (0) 2024.09.29
Apollo Client 캐시 동작과 관리 방법  (0) 2024.09.29
GraphQL Code Generator, 타입스크립트 정의 자동 생성  (0) 2024.09.10
    'Frontend/Apollo' 카테고리의 다른 글
    • GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기
    • Apollo Link 개요와 주요 기능
    • Apollo Client 캐시 동작과 관리 방법
    • GraphQL Code Generator, 타입스크립트 정의 자동 생성
    wam
    wam

    티스토리툴바