Cache Graphcool data for offline use

Question

So, I'm running an SPA (https://learn-redux.firebaseapp.com) which obtains all of its data from an Apollo/GraphCool endpoint, and utilises the offline-plugin for offline functionality.

When the network is set to 'offline' the application fails to display the data that was prviously display, and instead issues the following (See attached image):

POST https://api.graph.cool/simple/v1/projID net::ERR_INTERNET_DISCONNECTED

Is it possible for offline-plugin to cache all retrieved Graphcool data, so that the app is still usable in offline mode?

My webpack.config file is as follows:

module.exports = {
  devtool: 'source-map',
  context: __dirname,
  entry: {
    main: path.resolve(__dirname, './client/app'),
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: '[name]-[hash].js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new Dotenv({
      path: './.env', // Path to .env file (this is the default) 
      safe: true // load .env.example (defaults to "false" which does not use dotenv-safe) 
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),
    new HtmlWebpackPlugin({
      title: 'Flamingo City',
      filename: 'index.html',
      template: './index_template.ejs',
    }),
    new CopyWebpackPlugin([
      { from: '404.html' }, // Copies file from root to specified output:path:
      { from: 'manifest.json' },
      { from: 'images', to: 'images' },
    ]),
   new OfflinePlugin({
      publicPath: '/',
      safeToUseOptionalCaches: true,
      caches: {
        main: [
          'main-*.js',
          'index.html',
        ],
        additional: [
          ':externals:'
        ],
        optional: [
          ':rest:'
        ]
      },
      externals: [
        '/'
      ],
      ServiceWorker: {
        navigateFallbackURL: '/',
        events: true
      },
      AppCache: {
        FALLBACK: {
          '/': '/offline-page.html'
        },
        events: true
      }
    })
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

and my apollo client onnnection is as follows:

import ApolloClient, {
  createNetworkInterface,
  addTypeName,
} from 'apollo-client';

import { 
    SubscriptionClient, 
    addGraphQLSubscriptions,
} from 'subscriptions-transport-ws';

// Create WebSocket client
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/projID', {
  reconnect: true,
  connectionParams: {
    // Pass any arguments you want for initialization
  }
})
const networkInterface = createNetworkInterface({ 
  uri: 'https://api.graph.cool/simple/v1/projID',
  opts: {
    // Additional fetch options like `credentials` or `headers`
    credentials: 'same-origin',
  }
})

// Extend the network interface with the WebSocket
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: (o) => o.id,
   addTypeName: true
})

export default client;

Answer 1

apollo-offline addresses the question posed.