💁‍♂️ Apollo Client guild 공식문서를 보고 정리 한글입니다 * 모든 이미지,예제 출처는 공식문서입니다 (지속 수정중)
:https://www.apollographql.com/docs/react/data/queries

Apollo Client 학습하기 위해선 graphQl 사용법이 선수 되어야 한다

graphQl 사용법: https://graphql.org/learn/queries/

1. 데이터 가져오기

Apollo client 사용해 서버데이터를 가져와 봅시다

사용

apollo client 의 API 인 useQuery 훅스를 사용한다

ReactQuery , swr 과 비슷한 양상을 띄는게 특징이다

캐싱 (중요)

그로 그럴것이 캐싱도 해준다

Apollo 클라이언트의 캐싱

이런 형태로 저장된다

flat 테이블 (cash담은테이블) 에 중첩 데이터를 InMemoryCache에 데이터를 저장하기 전에 캐시는 데이터를 정규화 해야 한다.

정규화 저장과정은 마치 아래의 관계형 데이터 베이스 구성과 비슷하다

Apollo 클라이언트 캐시 구성

아래와 같이 사용하고

const cache = new InMemoryCache({
			addTypename:...,
            resultCaching:...,
            typePolicies:{
            	... ,
                ... ,
            }) 

옵션들은 아래 와 같다

캐시 ID 지정

 typePolicies: {
    AuthRootQuery: { keyFields: [] },
    HospitalRootQuery: { keyFields: [] },

정규화

Apollo Client 캐시가 쿼리 데이터를 받으면 다음과 같은 과정들을 수행한다.

1.객체를 확인한다. (Identify objects)

2.캐시 ID를 만든다. (Generate cache IDs)

3.객체의 필드를 레퍼런스로 대체한다. (Replace object field with references)

4.정규화된 객체를 저장한다.

쿼리 결과 최신 확인

두가 지 방식 polling 과 refetching 을 사용한다

polling

이런식으로 밀리세컨드를 준다

위와 같은 후크를 사용하여 옵션으로 사용할수있다

refetching

:다시 가져오기

onClick 이벤트시마다 refetch 기능을 사용하여 정보를 다시 받아오고 있다

그러나 사이드이펙트 (로드 상태에 약간의 복잡성이) 이있다 아래에서 자세히 다룰 예정

캐시에 데이터 읽기 및 쓰기

Apollo client 에서 캐시에 접근하기 위한 여러가지 방식을 지원한다

readQuery

캐시에서 직접 GraphQL 쿼리를 실행할 수 있습니다

ID가 5인 캐시된 할 일 항목을 가져옵니다.

이 개체에 필요한 변수를 제공합니다.

유형이 일치하지 않는 변수는 null을 반환합니다.

로드 상태 검사

useQuery 는 loading 을 반환한다

그럼 재호출시(refetch) 시에도 loading 상태가 변할까?

아니다 호출된 데이터는 그대로이고 loading 값도 변하지 않는다

그럼 재호출시 로딩 상태에 대해서 사용자에게 알려주고 싶으면 어떻게 할까?

번역이 이상한데... useQuery 훅에서 조건(notifyOnNetworkStatusChange) 을 걸어주면 된다

  if (networkStatus === NetworkStatus.refetch) return 'Refetching!';

networkStatus의 refetch 값을 사용하여 로드 상태를 감지한다

NetworkStatus 상태는 아래와 같이 enum 으로 정의 되어있다(5는 어따뺴먹은겨)

export enum NetworkStatus {
  loading = 1,
  setVariables = 2,
  fetchMore = 3,
  refetch = 4,
  poll = 6,
  ready = 7,
  error = 8,
}

https://github.com/apollographql/apollo-client/blob/main/src/core/networkStatus.ts

2. 데이터 업데이트 하기

Apollo client 사용해 서버데이터를 업데이트해 봅시다

3.당신이 apollo -client 도입시 마주할 설정들

ApolloClient

파라미터들

uri 를 안넣으면 link 옵션 필수

Apollo Link

query Mutation 수행시 사용자가 정의한 Link 가 순차적으로 실행되어 Link를 통해 해당 데이터를 제어 할수있도록 구현 할수 있다

Advanced HTTP networking

link 기능들을 제공함

이기능으로 네트워크 동작 , 데이터 흐름 을 제어 함

쓸때는 개체모음으로 정의

Ex)
 link: from([
   link.auth,
   link.error,
   link.persistedQueries,
 ]),

예제를 한번보자!

에러 핸들링 링크도 한번 보자

종류

 `from` 함수는 개별 링크의 배열을 결합합니다.

Custom Link

대략적인 시작 시간을 작업 컨텍스트에 추가하는 요청 핸들러를 정의 하는 예제

operation , forward 란 ?

Context 관리

예제

캐싱조회

사용자 인증 토큰 예제

인증토큰을찾고 캐시한다음 401 응답에서 제거

깃헙 문서

InMemoryCache()

참조

• https://medium.com/react-native-seoul/react-native-%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90-apollo-client-%ED%86%B5%ED%95%A9%ED%95%98%EA%B8%B0-1-48f449111332