Unduhan apollo offline - pengunduhan kode sumber apollo offline

apollo offline

Data situs web

1.0.0

Unduh

Perangkat offline untuk Apollo

Apollo-Offline menyediakan antarmuka jaringan khusus dan penyempurna penyimpanan Redux yang memungkinkan pengembangan aplikasi offline tanpa hambatan menggunakan klien Apollo GraphQL.

Apollo-Offline dibangun di atas Redux-Offline (dan karenanya mewarisi semua fiturnya).

Hal ini bertujuan untuk memanfaatkan fitur offline(-ish) Apollo yang sudah ada (misalnya cache bawaan dan respons optimis terhadap mutasi). Artinya, saat melakukan migrasi, kode Anda tidak perlu banyak berubah (selama Anda sudah menggunakan fitur ini).

Dengan Apollo-Offline, kode kueri dan mutasi Anda tampak persis seperti tanpanya.

Ada satu pengecualian untuk ini: Fitur "pengambilan optimis" .

Pengambilan Optimis

Apa yang dilakukan "pengambilan optimis" adalah ia mencoba membaca respons kueri dari cache terlebih dahulu, tetapi jika (dan hanya jika!) koneksi jaringan tersedia, ia akan mendapatkan respons server di latar belakang dan menuliskannya ke cache (pada saat itu) misalnya komponen React yang dibungkus akan diperbarui untuk kedua kalinya).

Pada dasarnya ini berarti kueri UI Anda akan selalu berfungsi jika data yang diminta tersedia di cache lokal dan data cache akan selalu konsisten dengan data server Anda jika dapat dijangkau.

Catatan: Menurut pendapat saya, inilah yang seharusnya dilakukan fetchPolicy: 'cache-and-network' (tetapi tidak - akan error jika server tidak dapat dijangkau).

Untuk mengaktifkannya, tambahkan bidang __offline__ dengan nilai sebenarnya ke variabel kueri dari kueri spesifik tersebut (yaitu variables: { __offline__: true } ).
Untuk petunjuk lebih lanjut, lihat contoh di bawah ini.

Memasang

menggunakan benang

yarn add apollo-offline

atau npm

npm install --save apollo-offline

Apollo-Offline juga mengharuskan Anda menginstal dependensi rekan berikut:

apollo-client
redux

Penggunaan (Contoh)

Pengaturan

 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 ) ,
  ) ,
) ;

Catatan: Setelah disiapkan, apollo-offline mencegat semua kueri/mutasi untuk mengaktifkan perilaku offline-first yang mulus.
Jika Anda ingin secara selektif mengecualikan beberapa kueri/mutasi dari ini, Anda dapat kembali ke perilaku default Apollo dengan menambahkan bidang __online__ dengan nilai sebenarnya ke variabel kueri dari kueri/mutasi spesifik tersebut (yaitu variables: { __online__: true } ) .

vanila 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 */ ,
} ) ;

Bereaksi

Di titik masuk Anda:

 /* 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' ) ,
) ;

Saat membungkus komponen Anda:

 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 */ ) ;