ดาวน์โหลด apollo offline - ดาวน์โหลด apollo offline ซอร์สโค้ด

apollo offline

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

ชุดเครื่องมือออฟไลน์สำหรับ Apollo

Apollo-Offline มอบอินเทอร์เฟซเครือข่ายแบบกำหนดเองและตัวเพิ่มประสิทธิภาพร้านค้า Redux ที่ช่วยให้การพัฒนาแอปออฟไลน์แรกได้อย่างราบรื่นโดยใช้ไคลเอ็นต์ Apollo GraphQL

Apollo-Offline สร้างขึ้นจาก Redux-Offline (และสืบทอดคุณสมบัติทั้งหมดของมัน)

มีจุดมุ่งหมายเพื่อใช้คุณลักษณะออฟไลน์ (-ish) ที่มีอยู่ของ Apollo (เช่น การแคชในตัว และการตอบสนองในแง่ดีสำหรับการกลายพันธุ์) ซึ่งหมายความว่าเมื่อย้ายข้อมูล รหัสของคุณไม่จำเป็นต้องเปลี่ยนแปลงมากนัก (ตราบใดที่คุณใช้คุณสมบัติเหล่านี้อยู่แล้ว)

ด้วย Apollo-Offline โค้ดของการสืบค้นและการเปลี่ยนแปลงของคุณจะดูเหมือนไม่มีเลย

มีข้อยกเว้นประการหนึ่งสำหรับสิ่งนี้: คุณลักษณะ "การดึงข้อมูลในแง่ดี"

การดึงข้อมูลในแง่ดี

สิ่งที่ "การดึงข้อมูลในแง่ดี" ทำคือพยายามอ่านคำตอบของแบบสอบถามจากแคชก่อน แต่ถ้า (และเฉพาะในกรณีที่!) การเชื่อมต่อเครือข่ายพร้อมใช้งานจะได้รับการตอบสนองของเซิร์ฟเวอร์ในพื้นหลังและเขียนลงในแคช ( ณ จุดนั้น เช่นส่วนประกอบ React ที่ห่อไว้จะอัปเดตเป็นครั้งที่สอง)

โดยพื้นฐานแล้วหมายความว่าการสืบค้น UI ของคุณจะทำงานเสมอหากข้อมูลที่ร้องขอมีอยู่ในแคชในเครื่อง และจะเก็บข้อมูลที่แคชไว้สอดคล้องกับข้อมูลเซิร์ฟเวอร์ของคุณเสมอหากสามารถเข้าถึงได้

หมายเหตุ: ในความคิดของฉัน นี่คือสิ่งที่ fetchPolicy: 'cache-and-network' ควรทำ (แต่ไม่ทำ - มันจะเกิดข้อผิดพลาดหากไม่สามารถเข้าถึงเซิร์ฟเวอร์)

หากต้องการเปิดใช้งาน ให้เพิ่มฟิลด์ __offline__ ที่มีค่าความจริงให้กับตัวแปรการสืบค้นของการสืบค้นเฉพาะนั้น (เช่น variables: { __offline__: true } )
สำหรับคำแนะนำเพิ่มเติม โปรดดูตัวอย่างด้านล่าง

ติดตั้ง

โดยใช้เส้นด้าย

yarn add apollo-offline

หรือเวลา 13.00 น

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 จะสกัดกั้นการสืบค้น/การเปลี่ยนแปลงทั้งหมดเพื่อเปิดใช้งานการทำงานแบบออฟไลน์เป็นอันดับแรกที่ราบรื่น
หากคุณต้องการแยกคำค้นหา/การเปลี่ยนแปลงบางส่วนออกจากสิ่งนี้ คุณสามารถเปลี่ยนกลับไปใช้พฤติกรรมเริ่มต้นของ Apollo ได้โดยการเพิ่มฟิลด์ __online__ ที่มีค่าความจริงให้กับตัวแปรการสืบค้นของการสืบค้น/การกลายพันธุ์เฉพาะนั้น (เช่น variables: { __online__: true } ) .

วานิลลา เจ.เอส

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