Created
March 21, 2018 16:11
-
-
Save MrLoh/1ae9e48ceb595207ecb3cfdb9849c083 to your computer and use it in GitHub Desktop.
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
// @flow | |
import { ApolloClient } from 'apollo-client'; | |
import { ApolloLink } from 'apollo-link'; | |
import { HttpLink } from 'apollo-link-http'; | |
import { RetryLink } from 'apollo-link-retry'; | |
import { AuthLink } from './link-auth'; | |
import cache from './cache'; | |
const retryLink = new RetryLink(); | |
const authLink = new AuthLink(); | |
const httpLink = new HttpLink({ uri: CINURU_API }); | |
const link = ApolloLink.from([reduxLoggerLink, retryLink, authLink, httpLink]); | |
// construct client | |
const client = new ApolloClient({ link, cache }); | |
// inject client dependencies | |
authLink.injectClient(client); | |
export default client; |
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
// @flow | |
import { ApolloLink, Observable } from 'apollo-link'; | |
import type { ApolloClient } from 'apollo-client'; | |
import type { Operation, NextLink } from 'apollo-link'; | |
import { getToken, refreshToken } from '../services/auth'; | |
export class AuthLink extends ApolloLink { | |
tokenRefreshingPromise: Promise<boolean> | null; | |
injectClient = (client: ApolloClient): void => { | |
this.client = client; | |
}; | |
refreshToken = (): Promise<boolean> => { | |
if (!this.tokenRefreshingPromise) this.tokenRefreshingPromise = refreshToken(this.client); | |
return this.tokenRefreshingPromise; | |
}; | |
setTokenHeader = (operation: Operation): void => { | |
const token = getToken(); | |
if (token) operation.setContext({ headers: { authorization: `Bearer ${token}` } }); | |
}; | |
request(operation: Operation, forward: NextLink) { | |
// set token in header | |
this.setTokenHeader(operation); | |
// try refreshing token once if it has expired | |
return new Observable(observer => { | |
let subscription, innerSubscription; | |
try { | |
subscription = forward(operation).subscribe({ | |
next: observer.next.bind(observer), | |
complete: observer.complete.bind(observer), | |
error: netowrkError => { | |
if (netowrkError.statusCode === 401) { | |
this.refreshToken().then(success => { | |
if (success) { | |
// set new token and retry operation | |
this.setTokenHeader(operation); | |
innerSubscription = forward(operation).subscribe(observer); | |
} else { | |
// throw error | |
observer.error(new Error('jwt refresh failed')); | |
} | |
}); | |
} else { | |
observer.error(netowrkError); | |
} | |
}, | |
}); | |
} catch (e) { | |
observer.error(e); | |
} | |
return () => { | |
if (subscription) subscription.unsubscribe(); | |
if (innerSubscription) innerSubscription.unsubscribe(); | |
}; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yes it does. Solution is to reset the tokenRefreshingPromise in the observer return function, along with the two subscriptions.
if (this.tokenRefreshingPromise) this.tokenRefreshingPromise = null
FWIW I got this working nicely and appreciate the pattern. Bit nervous about updating apollo-link now though.