All Projects → Malpaux → Apollo Offline

Malpaux / Apollo Offline

Licence: bsd-3-clause
An offline toolkit for the Apollo client

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Apollo Offline

Fakebooker Frontend
Stars: ✭ 124 (-33.33%)
Mutual labels:  graphql, apollo-client
Aws Mobile Appsync Events Starter React Native
GraphQL starter application with Realtime and Offline functionality using AWS AppSync
Stars: ✭ 134 (-27.96%)
Mutual labels:  graphql, offline
Nextjs Hasura Boilerplate
🎨 Boilerplate for building applications using Hasura and Next.js
Stars: ✭ 126 (-32.26%)
Mutual labels:  graphql, apollo-client
Prisma Auth0 Example
Boilerplate Prisma Startup
Stars: ✭ 184 (-1.08%)
Mutual labels:  graphql, apollo-client
Typescript Expo Apollo Boilerplate
Clean boilerplate for TypeScript + Expo (React Native) + React Apollo (GraphQL)
Stars: ✭ 144 (-22.58%)
Mutual labels:  graphql, apollo-client
Graphql Codegen Hasura
code-generator plugins for hasura/apollo-gql/typescript development
Stars: ✭ 113 (-39.25%)
Mutual labels:  graphql, apollo-client
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-31.72%)
Mutual labels:  graphql, apollo-client
Guide
📖 The GraphQL Guide website
Stars: ✭ 104 (-44.09%)
Mutual labels:  graphql, apollo-client
Graphql Directive
Use custom directives in your GraphQL schema and queries 🎩
Stars: ✭ 142 (-23.66%)
Mutual labels:  graphql, apollo-client
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-24.19%)
Mutual labels:  graphql, offline-first
Nextjs Headless Wordpress
🔥 Nextjs Headless WordPress
Stars: ✭ 110 (-40.86%)
Mutual labels:  graphql, apollo-client
Next Graphql Blog
🖊 A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: ✭ 152 (-18.28%)
Mutual labels:  graphql, apollo-client
Apollo Link
🔗 Interface for fetching and modifying control flow of GraphQL requests
Stars: ✭ 1,434 (+670.97%)
Mutual labels:  graphql, apollo-client
React Graphql Github Apollo
🚀 A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.
Stars: ✭ 1,563 (+740.32%)
Mutual labels:  graphql, apollo-client
Angular1 Apollo
AngularJS integration for the Apollo Client
Stars: ✭ 108 (-41.94%)
Mutual labels:  graphql, apollo-client
Awesome Apollo Graphql
A curated list of amazingly awesome things regarding Apollo GraphQL ecosystem 🌟
Stars: ✭ 126 (-32.26%)
Mutual labels:  graphql, apollo-client
Wq.app
💻📱 wq's app library: a JavaScript framework powering offline-first web & native apps for geospatial data collection, mobile surveys, and citizen science. Powered by Redux, React, Material UI and Mapbox GL.
Stars: ✭ 99 (-46.77%)
Mutual labels:  offline-first, offline
Tetrys
𝌶 Tetris as Progressive Web Application
Stars: ✭ 100 (-46.24%)
Mutual labels:  web-app, offline-first
Wora
Write Once, Render Anywhere. typescript libraries: cache-persist, apollo-offline, relay-offline, offline-first, apollo-cache, relay-store, netinfo, detect-network
Stars: ✭ 138 (-25.81%)
Mutual labels:  offline-first, offline
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+885.48%)
Mutual labels:  graphql, apollo-client

Offline toolkit for Apollo

wercker status

Apollo-Offline provides a custom network interface and Redux store enhancer that enable seamless offline-first app development using the Apollo GraphQL client.

Apollo-Offline is built on top of Redux-Offline (and thus inherits all of its features).

It aims to make use of Apollo's existing offline(-ish) features (e.g. built-in caching and optimistic responses for mutations). This means when migrating, your code won't have to change a lot (as long as you are already using these features).

With Apollo-Offline, the code of your queries and mutations looks exactly like it would without.

There is one exception to this: The "optimistic fetch" feature.

Optimistic Fetch

What "optimistic fetch" does is it tries to first read a query's response from the cache, but if (and only if!) a network connection is available will get the server's response in the background and write it to the cache (at that point e.g. wrapped React components will update a second time).

Basically this means your UI's queries will always work if the requested data is available in the local cache and it will always keep the cached data consistent with your server data if it can be reached.

Note: In my opinion, this is what fetchPolicy: 'cache-and-network' should do (but doesn't - it errors if the server can't be reached).

To enable it, add an __offline__ field with a truthy value to the query variables of that specific query (i.e. variables: { __offline__: true }).
For further instructions, see the examples below.

Install

using yarn

yarn add apollo-offline

or npm

npm install --save apollo-offline

Apollo-Offline additionally requires you to have the following peer dependencies installed:

  • apollo-client
  • redux

Usage (Examples)

Setup

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

Note: Once set up, apollo-offline intercepts all queries/mutations to enable its seamless offline-first behaviour.
If you want to selectively exclude some queries/mutations from this, you can revert back to Apollo's default behaviour by adding an __online__ field with a truthy value to the query variables of that specific query/mutation (i.e. variables: { __online__: true }).

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

React

In your entry point:

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

When wrapping your components:

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

Developing

This is what you do after you have cloned the repository:

yarn / npm install

(Install dependencies)

Linting

Execute TSLint

npm run lint

Try to automatically fix linting errors

npm run lint:fix

Testing

Execute Jest unit tests using

npm test

npm run test:coverage

Tests are defined in the same directory the module lives in. They are specified in '[module].test.js' files.

Building

To build the project, execute

npm run build

This saves the production ready code into 'dist/'.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].