Skip to content

Instantly share code, notes, and snippets.

@scally
Last active January 8, 2019 23:53
Show Gist options
  • Save scally/06b632475c255499e03c0ee54f96b79b to your computer and use it in GitHub Desktop.
Save scally/06b632475c255499e03c0ee54f96b79b to your computer and use it in GitHub Desktop.
Apollo-Boost with Subscriptions

apollo-boost w/subscriptions

Got tired of waiting for Apollo to decide to do this

Requires ds300/patch-package

patch-package
--- a/node_modules/apollo-boost/src/index.ts
+++ b/node_modules/apollo-boost/src/index.ts
@@ -3,21 +3,24 @@ export * from 'apollo-client';
export * from 'apollo-link';
export * from 'apollo-cache-inmemory';
-import { Operation, ApolloLink, Observable } from 'apollo-link';
+import { Operation, ApolloLink, Observable, split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { withClientState, ClientStateConfig } from 'apollo-link-state';
import { onError, ErrorLink } from 'apollo-link-error';
+import { WebSocketLink } from 'apollo-link-ws';
import { ApolloCache } from 'apollo-cache';
import { InMemoryCache, CacheResolverMap } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';
import ApolloClient from 'apollo-client';
+import { getMainDefinition } from 'apollo-utilities';
export { gql, HttpLink };
export interface PresetConfig {
request?: (operation: Operation) => Promise<void>;
uri?: string;
+ subscriptionUri: string;
credentials?: string;
headers?: any;
fetch?: GlobalFetch['fetch'];
@@ -41,6 +44,7 @@ export interface PresetConfig {
const PRESET_CONFIG_KEYS = [
'request',
'uri',
+ 'subscriptionUri',
'credentials',
'headers',
'fetch',
@@ -69,6 +73,7 @@ export default class DefaultClient<TCache> extends ApolloClient<TCache> {
const {
request,
uri,
+ subscriptionUri,
credentials,
headers,
fetch,
@@ -140,6 +145,14 @@ export default class DefaultClient<TCache> extends ApolloClient<TCache> {
)
: false;
+ const wsLink = new WebSocketLink({
+ uri: subscriptionUri,
+ options: {
+ reconnect: true
+ },
+ connectionParams: async () => ({...headers || {}})
+ });
+
const httpLink = new HttpLink({
uri: uri || '/graphql',
fetch,
@@ -148,11 +161,21 @@ export default class DefaultClient<TCache> extends ApolloClient<TCache> {
headers: headers || {},
});
+ const splitToHttpOrWsLink = split(
+ // split based on operation type
+ ({ query }) => {
+ const { kind, operation } = getMainDefinition(query) as any;
+ return kind === 'OperationDefinition' && operation === 'subscription';
+ },
+ wsLink,
+ httpLink,
+ );
+
const link = ApolloLink.from([
errorLink,
requestHandler,
stateLink,
- httpLink,
+ splitToHttpOrWsLink,
].filter(x => !!x) as ApolloLink[]);
// super hacky, we will fix the types eventually
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment