1
私はApollo/GraphCoolエンドポイントからすべてのデータを取得し、オフライン機能のためにオフラインプラグインを利用するSPA（https://learn-redux.firebaseapp.com）を実行しています。オフライン使用のためのキャッシュグラフクールデータ
POST https://api.graph.cool/simple/v1/projID net::ERR_INTERNET_DISCONNECTED
はオフラインのため、それが可能です：ネットワークは（添付画像を参照してください）アプリケーションがprviously表示したデータを表示するために失敗し、代わりに以下を発行します「オフライン」に設定されている
-pluginを実行すると、取得したすべての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'
}
]
}
};と私のアポロクライアントonnnection次のとおりです。
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;