apollo offline

Apollo용 오프라인 툴킷

Apollo-Offline은 Apollo GraphQL 클라이언트를 사용하여 원활한 오프라인 우선 앱 개발을 가능하게 하는 맞춤형 네트워크 인터페이스와 Redux 저장소 강화 기능을 제공합니다.

Apollo-Offline은 Redux-Offline 위에 구축되었습니다(따라서 모든 기능을 상속합니다).

이는 Apollo의 기존 오프라인(-ish) 기능(예: 내장 캐싱 및 돌연변이에 대한 낙관적 응답)을 활용하는 것을 목표로 합니다. 즉, 마이그레이션할 때 코드를 많이 변경할 필요가 없습니다(이미 이러한 기능을 사용하고 있는 한).

Apollo-Offline을 사용하면 쿼리 및 변형 코드가 없을 때와 똑같아 보입니다.

이에 대한 한 가지 예외가 있습니다: "낙관적 가져오기" 기능입니다.

낙관적 가져오기

"낙관적 가져오기"가 수행하는 작업은 먼저 캐시에서 쿼리 응답을 읽으려고 시도하지만 네트워크 연결이 가능한 경우에만 백그라운드에서 서버의 응답을 가져와 캐시에 기록합니다(해당 시점에서). 예를 들어 래핑된 React 구성요소는 두 번째로 업데이트됩니다.

기본적으로 이는 요청된 데이터가 로컬 캐시에서 사용 가능한 경우 UI 쿼리가 항상 작동하고 캐시된 데이터에 도달할 수 있는 경우 항상 캐시된 데이터와 서버 데이터의 일관성을 유지한다는 것을 의미합니다.

참고: 제 생각에는 이것이 fetchPolicy: 'cache-and-network' 가 수행해야 하는 작업입니다(그러나 그렇지 않습니다. 서버에 연결할 수 없으면 오류가 발생합니다).

이를 활성화하려면 해당 특정 쿼리의 쿼리 변수에 참값이 포함된 __offline__ 필드를 추가하세요(예: variables: { __offline__: true } ).
자세한 지침은 아래 예를 참조하세요.

설치하다

실을 사용하여

yarn add apollo-offline

또는 npm

npm install --save apollo-offline

Apollo-Offline에서는 추가로 다음 피어 종속성을 설치해야 합니다.

• apollo-client
• redux

사용법(예)

설정

 import { ApolloClient , createNetworkInterface } from 'apollo-client' ;
import { applyMiddleware , combineReducers , compose , createStore } from 'redux' ;
import config from '@redux-offline/redux-offline/lib/defaults' ;

import offline from 'apollo-offline' ;

// 1. Wrap your network interface
const { enhancer , networkInterface } = offline (
  createNetworkInterface ( {
    uri : `http://localhost` ,
  } ) ,
) ;

// 2. Create your Apollo client
const client = new ApolloClient ( {
  /* Your Apollo configuration here... */
  networkInterface ,
} ) ;

// 3. Pass the client to the offline network interface
// (Optional, but needed for the optimistic fetch feature)
networkInterface . setClient ( client ) ;

// 4. Create your redux store
export const store = createStore (
  combineReducers ( {
    apollo : client . reducer ( ) ,
  } ) ,
  undefined ,
  compose (
    applyMiddleware ( client . middleware ( ) ) ,

    // Apply offline store enhancer
    // (You can pass your own redux-offline config, but the default one is a good starting point)
    enhancer ( config ) ,
  ) ,
) ;

참고: 일단 설정되면 apollo-offline은 모든 쿼리/변형을 차단하여 원활한 오프라인 우선 동작을 활성화합니다.
여기에서 일부 쿼리/변형을 선택적으로 제외하려면 해당 특정 쿼리/변형의 쿼리 변수에 진실 값이 있는 __online__ 필드를 추가하여 Apollo의 기본 동작으로 되돌릴 수 있습니다(예: variables: { __online__: true } ). .

바닐라JS

 /* Setup goes here... */

// Queries
client . query ( { query : /* Your query here */ } ) ;

// - Using optimistic fetch feature
client . query ( {
  fetchPolicy : 'network-only' ,
  query : /* Your query here */ ,
  variables : {
    __offline__ : true , // Enable optimistic fetch
  } ,
} ) ;

// Mutations
client . mutate ( {
  mutation : /* Your mutation here */ ,
  optimisticResponse : /* Your optimistic response here */ ,
  update : /* Your update resolver here */ ,
} ) ;

반응하다

진입점에서:

 /* Setup goes here... */

import { ApolloProvider } from 'react-apollo' ;
import { connect } from 'react-redux' ;

import App from './App' ; // Your main application component

// Component to postpone render until after Redux state has been rehydrated
const Rehydrated = connect ( ( { rehydrated } ) => ( { rehydrated } ) )
  ( ( props ) => props . rehydrated ? props . children : props . loading ) ;

const Loading = ( ) => < div > Loading... </ div > ;

ReactDOM . render (
  < ApolloProvider client = { client } store = { store } >
    < Rehydrated loading = { < Loading /> } >
      < App />
    </ Rehydrated >
  </ ApolloProvider > ,
  document . getElementById ( 'root' ) ,
) ;

구성요소를 래핑할 때:

 import React from 'react' ;
import { graphql } from 'react-apollo' ;

// Queries
const wrappedComponent = graphql ( /* Your query here */ ) ( /* Your component here */ ) ;

// - Using optimistic fetch feature
const wrappedComponent = graphql (
  /* Your query here */ ,
  {
    options : {
      fetchPolicy : 'network-only' ,
      variables : {
        __offline__ : true , // Enable optimistic fetch
      } ,
    } ,
  } ,
) ( /* Your component here */ ) ;

// Mutations (you will want to provide an optimistic response when executing them)
const wrappedComponent = graphql (
  /* Your mutation here */ ,
  {
    options : {
      update : /* Your update resolver here */ ,
    } ,
  } ,
) ( /* Your component here */ ) ; 

개발 중

저장소를 복제한 후 수행하는 작업은 다음과 같습니다.

yarn / npm install

(종속성 설치)

린팅

TSLint 실행

npm run lint

Linting 오류 자동 수정 시도

npm run lint:fix

테스트

다음을 사용하여 Jest 단위 테스트를 실행합니다.

npm test

npm run test:coverage

테스트는 모듈이 있는 동일한 디렉터리에 정의됩니다. 테스트는 '[module].test.js' 파일에 지정됩니다.

건물

프로젝트를 빌드하려면 다음을 실행하세요.

npm run build

이렇게 하면 프로덕션 준비 코드가 'dist/'에 저장됩니다.