React에서 Apollo Client 설정하기

@apollo/client와 graphql을 설치하십시오. graphql 패키지는 Apollo Client가 gql 템플릿 태그로 쿼리 문서를 구문 분석할 때 필요로 하는 피어 종속성입니다.

TypeScript 프로젝트에서는 두 패키지 모두 자체 타입 정의를 함께 제공하므로 @types 패키지가 필요하지 않습니다.

캐시와 링크를 사용하여 ApolloClient를 인스턴스화하십시오. 가장 간단한 설정은 다음과 같습니다: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). uri 단축 표기법은 내부적으로 HttpLink를 생성합니다.

더 세밀하게 제어하려면 링크 체인을 수동으로 구성하고 uri 대신 link 옵션에 전달하십시오.

client prop을 사용하여 React 애플리케이션을 ApolloProvider로 감싸십시오: ApolloProvider client={client}. 이렇게 하면 React 컨텍스트를 통해 모든 하위 컴포넌트에서 Apollo Client 인스턴스를 사용할 수 있습니다.

컴포넌트 트리에서 호출되는 모든 useQuery와 useMutation은 prop을 여러 단계로 전달하지 않아도 자동으로 이 클라이언트를 사용합니다.

InMemoryCache는 Apollo Client의 기본 캐시입니다. 가져온 데이터를 타입과 ID를 기준으로 정규화하여 각 엔터티를 고유한 캐시 키(예: User:1) 아래에 저장합니다. 어떤 쿼리에서든 User:1을 가져오면 이후 해당 엔터티를 읽을 때 업데이트된 데이터를 받습니다.

이 정규화 덕분에 한 변이에서 사용자를 업데이트하면 추가 코드 없이 해당 사용자를 포함하는 모든 쿼리 결과가 자동으로 업데이트됩니다.

HttpLink는 Apollo Client와 GraphQL 서버 사이의 HTTP 전송을 처리합니다. uri를 설정하고, 필요에 따라 fetch, headers 및 credentials도 설정할 수 있습니다.

고급 사용 사례에서는 링크를 분할하여 서로 다른 작업을 서로 다른 엔드포인트로 전달합니다. 구독은 WebSocket(WebSocketLink)을 통해 전송하고, 쿼리와 변이는 HTTP(HttpLink)를 통해 전송합니다.

@apollo/client/link/context에서 setContext를 가져오십시오. 인증 링크를 생성합니다: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). HttpLink 앞에 연결하십시오: authLink.concat(httpLink).

setContext 링크는 각 요청 전에 실행되어 모든 작업에 인증 헤더를 동적으로 추가합니다.

ApolloLink.from([authLink, errorLink, httpLink]) 또는 authLink.concat(httpLink)을 사용하여 링크를 구성하십시오. 링크는 미들웨어입니다. 각 링크는 작업을 처리한 다음 next()로 다음 링크에 전달합니다. 체인의 마지막 링크가 실제 HTTP 요청을 전송합니다.

일반적인 체인은 인증 링크(헤더 추가) + 오류 링크(오류 처리) + HTTP 링크(요청 전송)로 구성됩니다.

@apollo/client/link/error에서 onError를 가져오십시오. 오류 링크는 GraphQL 오류와 네트워크 오류를 전역적으로 가로챕니다. UNAUTHENTICATED 오류가 발생했을 때 로그인 페이지로 리디렉션하거나 네트워크 장애가 발생했을 때 전역 오류 알림을 표시하는 데 사용할 수 있습니다.

오류 링크는 체인에서 HTTP 링크보다 앞에 있어야 하지만, forward(operation)을 호출하여 요청을 다시 시도할 수 있습니다.

cache-first(기본값): 캐시된 데이터를 즉시 반환하고, 오래된 경우 백그라운드에서 다시 가져옵니다. network-only: 항상 서버에서 가져와 캐시를 업데이트합니다. cache-and-network: 캐시를 즉시 반환하고 동시에 가져온 다음, 응답이 도착하면 사용자 인터페이스를 업데이트합니다. cache-only: 캐시에서만 읽고, 캐시되지 않은 경우 오류를 발생시킵니다. no-cache: 항상 가져오지만 캐시에 기록하지 않습니다.

데이터 최신성 요구 사항을 기준으로 선택하십시오. 대시보드는 cache-and-network를 자주 사용하고, 사용자 프로필 양식은 network-only를 사용합니다.

InMemoryCache의 defaultOptions에서 기본 fetchPolicy를 설정하십시오: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). 개별 useQuery 호출에서는 쿼리별로 이 설정을 재정의할 수 있습니다.

합리적인 전역 기본값을 설정하면 모든 훅 호출에서 fetchPolicy를 지정해야 하는 반복 코드가 줄어듭니다.

Apollo Client DevTools 브라우저 확장 프로그램은 Chrome DevTools에 Apollo 패널을 추가합니다. 모든 캐시된 쿼리와 현재 데이터를 보여 주고, 정규화된 캐시를 탐색하며, DevTools 패널에서 쿼리를 다시 실행할 수 있게 합니다.

Chrome 웹 스토어에서 설치하고 devtools: { enabled: true }로 클라이언트를 초기화하십시오(개발 모드에서는 기본값입니다).

Apollo Client의 링크 체인에서 errorLink는 httpLink를 기준으로 어디에 배치해야 합니까?

@apollo/client와 graphql을 설치하고, InMemoryCache와 링크 체인을 사용하여 ApolloClient를 생성한 다음, 애플리케이션을 ApolloProvider로 감싸십시오. 링크 체인은 authLink(토큰 추가), errorLink(전역 오류 처리) 및 httpLink(HTTP 전송)로 구성됩니다. 가져오기 정책은 캐시와 네트워크 중 어느 쪽을 우선할지 제어하고, InMemoryCache는 타입과 ID를 기준으로 엔터티를 정규화합니다.

Apollo DevTools 브라우저 확장 프로그램을 사용하면 캐시를 쉽게 검사하고 디버깅할 수 있습니다.