缓存 Graphcool 数据以供离线使用

Question

所以，我是运行一个 SPA (https://learn-redux.firebaseapp.com)，它从 Apollo/GraphCool 端点获取所有数据，并利用离线插件实现离线功能。

当网络设置为 'offline' 时，应用程序无法显示先前显示的数据，而是发出以下内容（见附图）：

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

离线插件是否可以缓存所有检索到的 Graphcool 数据，以便该应用程序在离线模式下仍然可用？

我的webpack.config文件如下：

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'
    }
    ]
  }
};

我的apollo客户端连接如下：

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 解决了提出的问题。

缓存 Graphcool 数据以供离线使用

Cache Graphcool data for offline use

offline-caching

apollo

webpack

progressive-web-apps