-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(graphql): abandon vue-apollo over apollo-client, Add eslint
Avoid vue-apollo overhead by abandoning the package over direct calls to apollo-client; Add eslint config; Fix race conditions BREAKING CHANGE: Subscriptions are now called directly, removed vue-apollo components and Vue component properties
- Loading branch information
1 parent
e64330a
commit 4771b81
Showing
13 changed files
with
9,978 additions
and
4,414 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
dist | ||
node_modules | ||
test | ||
*.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { HeuristicFragmentMatcher } from 'apollo-cache-inmemory'; | ||
|
||
let haveWarned = false; | ||
|
||
export default class CustomHeuristicFragmentMatcher extends HeuristicFragmentMatcher { | ||
match(idValue: any, typeCondition: any, context: any) { | ||
const obj = context.store.get(idValue.id); | ||
|
||
if (!obj) { | ||
return false; | ||
} | ||
|
||
if (!obj.__typename) { | ||
if (!haveWarned) { | ||
console.warn(`You're using fragments in your queries, but either don't have the addTypename: | ||
true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename. | ||
Please turn on the addTypename option and include __typename when writing fragments so that Apollo Client | ||
can accurately match fragments.`); | ||
console.warn( | ||
'Could not find __typename on Fragment ', | ||
typeCondition, | ||
obj, | ||
); | ||
console.warn(`DEPRECATION WARNING: using fragments without __typename is | ||
unsupported behavior and will be removed in future versions of Apollo client. | ||
You should fix this and set addTypename to true now.`); | ||
} | ||
|
||
haveWarned = true; | ||
|
||
return false; | ||
} | ||
|
||
return obj.__typename === typeCondition; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { ApolloLink, FetchResult, Observable, Operation } from 'apollo-link'; | ||
import Pusher from 'pusher-js'; | ||
|
||
class PusherLink extends ApolloLink { | ||
private pusher: Pusher; | ||
|
||
constructor(options: any) { | ||
super(); | ||
// Retain a handle to the Pusher client | ||
this.pusher = options.pusher; | ||
} | ||
|
||
request(operation: Operation, forward: (operation: Operation) => Observable<FetchResult>) { | ||
return new Observable(observer => { | ||
// Check the result of the operation | ||
forward(operation).subscribe({ | ||
next: data => { | ||
// If the operation has the subscription extension, it's a subscription | ||
const subscriptionChannel = this._getChannel( | ||
{ data, operation }, | ||
); | ||
|
||
if (subscriptionChannel) { | ||
this._createSubscription(subscriptionChannel, observer); | ||
} else { | ||
// No subscription found in the response, pipe data through | ||
observer.next(data); | ||
observer.complete(); | ||
} | ||
}, | ||
}); | ||
}); | ||
} | ||
|
||
_getChannel({ data, operation }: { data: any, operation: any }) { | ||
return !!data.extensions | ||
&& !!data.extensions.lighthouse_subscriptions | ||
&& !!data.extensions.lighthouse_subscriptions.channels | ||
? data.extensions.lighthouse_subscriptions.channels[operation.operationName] | ||
: null; | ||
} | ||
|
||
_createSubscription(subscriptionChannel: string, observer: any) { | ||
const pusherChannel = this.pusher.subscribe(subscriptionChannel); | ||
// Subscribe for more update | ||
|
||
pusherChannel.bind('lighthouse-subscription', (payload: any) => { | ||
if (!payload.more) { | ||
// This is the end, the server says to unsubscribe | ||
this.pusher.unsubscribe(subscriptionChannel); | ||
observer.complete(); | ||
} | ||
const { result } = payload; | ||
|
||
if (result) { | ||
// Send the new response to listeners | ||
observer.next(result); | ||
} | ||
}); | ||
} | ||
} | ||
|
||
export default PusherLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory'; | ||
import { persistCache } from 'apollo-cache-persist'; | ||
import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'; | ||
import Pusher from 'pusher-js'; | ||
import CustomHeuristicFragmentMatcher from './CustomHeuristicFragmentMatcher'; | ||
import PusherLink from './PusherLink'; | ||
|
||
Pusher.logToConsole = process.env.NODE_ENV !== 'production'; | ||
|
||
// Name of the localStorage item | ||
const AUTH_TOKEN = 'accessToken'; | ||
|
||
// Http endpoint | ||
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://127.0.0.1:3000/graphql'; | ||
|
||
const pusherLink = new PusherLink({ | ||
pusher: new Pusher(process.env.VUE_APP_PUSHER_KEY, { | ||
cluster: process.env.VUE_APP_PUSHER_CLUSTER, | ||
forceTLS: true, | ||
authEndpoint: `${process.env.VUE_APP_HTTP_ENDPOINT}/graphql/subscriptions/auth`, | ||
auth: { | ||
params: null, | ||
headers: { | ||
authorization: `Bearer ${localStorage.getItem(AUTH_TOKEN)}`, | ||
}, | ||
}, | ||
}), | ||
}); | ||
|
||
const cache = new InMemoryCache({ | ||
// @ts-ignore | ||
dataIdFromObject: result => (result.__typename && result.uuid ? `${result.__typename}:${result.uuid}` : defaultDataIdFromObject(result)), | ||
fragmentMatcher: new CustomHeuristicFragmentMatcher(), | ||
}); | ||
|
||
// noinspection JSIgnoredPromiseFromCall | ||
persistCache({ | ||
cache, | ||
// @ts-ignore | ||
storage: window.localStorage, | ||
debug: true, | ||
}); | ||
|
||
const { apolloClient, wsClient } = createApolloClient({ | ||
httpEndpoint, | ||
tokenName: AUTH_TOKEN, | ||
link: pusherLink, | ||
connectToDevTools: process.env.NODE_ENV !== 'production', | ||
cache, | ||
}); | ||
|
||
export { | ||
apolloClient, | ||
wsClient, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.