I'm not sure how to get the store context in my apollo plugin file. Read this comment https://github.com/nuxt-community/modules/issues/89#issuecomment-318107891 but i'm not sure how to implement this in my situation.
plugins/apollo.js
import { ApolloClient, createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
const ssr = process.SERVER_BUILD
// Create the network interface
const networkInterface = createNetworkInterface({
uri: '',
transportBatching: true,
});
networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
}
const token = // get from store
req.options.headers.authorization = token ? `Bearer ${token}` : null;
next();
}
}]);
let networkInterfaceWithSubscriptions;
// Create the subscription websocket client
if (! ssr) {
const wsClient = new SubscriptionClient('', {
reconnect: true,
timeout: 20000
});
// Extend the network interface with the subscription client
networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient,
);
}
// Create the apollo client with the new network interface
const apolloClient = new ApolloClient({
networkInterface : ssr ? networkInterface : networkInterfaceWithSubscriptions,
dataIdFromObject: r => r.id,
ssrForceFetchDelay: process.browser ? 1 : 0,
...(ssr ? {
ssrMode: true
} : {
connectToDevTools: process.env.NODE_ENV !== 'production'
})
});
export default apolloClient;
Tried this but it isn't quite right
import { ApolloClient, createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';
const ssr = process.SERVER_BUILD
export default ({store}) => {
// Create the network interface
const networkInterface = createNetworkInterface({
uri: '',
transportBatching: true,
});
networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
}
const token = store.auth.token;
req.options.headers.authorization = token ? `Bearer ${token}` : null;
next();
}
}]);
let networkInterfaceWithSubscriptions;
// Create the subscription websocket client
if (! ssr) {
const wsClient = new SubscriptionClient('', {
reconnect: true,
timeout: 20000
});
// Extend the network interface with the subscription client
networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient,
);
}
// Create the apollo client with the new network interface
const apolloClient = new ApolloClient({
networkInterface : ssr ? networkInterface : networkInterfaceWithSubscriptions,
dataIdFromObject: r => r.id,
ssrForceFetchDelay: process.browser ? 1 : 0,
...(ssr ? {
ssrMode: true
} : {
connectToDevTools: process.env.NODE_ENV !== 'production'
})
});
return apolloClient;
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1116">#c1116</a>)</em></sub></div>