Téléchargement apollo offline - Téléchargement du code source apollo offline

apollo offline

Données du site Web

1.0.0

Télécharger

Boîte à outils hors ligne pour Apollo

Apollo-Offline fournit une interface réseau personnalisée et un amplificateur de magasin Redux qui permettent un développement transparent d'applications hors ligne à l'aide du client Apollo GraphQL.

Apollo-Offline est construit sur Redux-Offline (et hérite ainsi de toutes ses fonctionnalités).

Il vise à utiliser les fonctionnalités hors ligne existantes d'Apollo (par exemple, la mise en cache intégrée et les réponses optimistes aux mutations). Cela signifie que lors de la migration, votre code n'aura pas besoin de beaucoup changer (tant que vous utilisez déjà ces fonctionnalités).

Avec Apollo-Offline, le code de vos requêtes et mutations ressemble exactement à ce qu'il serait sans.

Il y a une exception à cela : la fonctionnalité « récupération optimiste » .

Récupération optimiste

Ce que fait la "récupération optimiste", c'est qu'elle essaie d'abord de lire la réponse d'une requête dans le cache, mais si (et seulement si !) une connexion réseau est disponible, elle obtiendra la réponse du serveur en arrière-plan et l'écrira dans le cache (à ce stade). par exemple, les composants React enveloppés seront mis à jour une deuxième fois).

Fondamentalement, cela signifie que les requêtes de votre interface utilisateur fonctionneront toujours si les données demandées sont disponibles dans le cache local et qu'elles garderont toujours les données mises en cache cohérentes avec les données de votre serveur si elles peuvent être atteintes.

Remarque : à mon avis, c'est ce que fetchPolicy: 'cache-and-network' devrait faire (mais ce n'est pas le cas - cela génère des erreurs si le serveur n'est pas accessible).

Pour l'activer, ajoutez un champ __offline__ avec une valeur véridique aux variables de requête de cette requête spécifique (c'est-à-dire variables: { __offline__: true } ).
Pour plus d’instructions, consultez les exemples ci-dessous.

Installer

utiliser du fil

yarn add apollo-offline

ou npm

npm install --save apollo-offline

Apollo-Offline nécessite en outre que les dépendances homologues suivantes soient installées :

apollo-client
redux

Utilisation (exemples)

Installation

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

Remarque : Une fois configuré, apollo-offline intercepte toutes les requêtes/mutations pour permettre son comportement transparent d'abord hors ligne.
Si vous souhaitez en exclure sélectivement certaines requêtes/mutations, vous pouvez revenir au comportement par défaut d'Apollo en ajoutant un champ __online__ avec une valeur véridique aux variables de requête de cette requête/mutation spécifique (c'est-à-dire variables: { __online__: true } ). .

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

Réagir

Dans votre point d'entrée :

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

Lors de l'emballage de vos composants :

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