Skip to content

Instantly share code, notes, and snippets.

@jrobber
Last active February 6, 2021 12:37
Show Gist options
  • Save jrobber/bfbd555d070868e6e80840cdc3d62759 to your computer and use it in GitHub Desktop.
Save jrobber/bfbd555d070868e6e80840cdc3d62759 to your computer and use it in GitHub Desktop.
sample apollo setup
//Apollo client config to set up the token based on the token in the store. Has to be done this way because apollo uses middleware.
import { ApolloLink } from "apollo-link";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
export default ctx => {
// console.log('apollo init', ctx)
const uri = process.server ? "http://localhost:5000/graphql" : "/graphql";
const httpLink = new HttpLink({ uri });
// middleware
const middlewareLink = new ApolloLink((operation, forward) => {
const token = ctx.app.$auth.$storage.getUniversal('_token.localQL')
if (token) {
operation.setContext({
headers: {
authorization: token
}
});
}
return forward(operation, forward);
});
const link = middlewareLink.concat(httpLink);
return {
link,
cache: new InMemoryCache()
};
};
export default class LocalScheme {
constructor(auth, options) {
this.$auth = auth;
this.$apollo = this.$auth.ctx.app.apolloProvider.defaultClient;
this.name = options._name;
this.options = Object.assign({}, DEFAULTS, options);
}
_setToken(token) {
if (this.options.globalToken) {
// Set Authorization token for all axios requests
// this.$auth.$storage.setUniversal("token", token, false);
//This is un-needed because we'll just get the token off of localStorage
}
}
_clearToken() {
this.$apollo.link.request = (forward, operation) => forward(operation);
}
mounted() {
if (this.options.tokenRequired) {
const token = this.$auth.syncToken(this.name);
this._setToken(token);
}
return this.$auth.fetchUserOnce();
}
async login(operation) {
if (!this.options.operations.login) {
return;
}
const result = await this.$auth.request(
operation,
this.options.operations.login
);
if (this.options.tokenRequired && result) {
const token = this.options.tokenType
? this.options.tokenType + " " + result
: result;
this.$auth.setToken(this.name, token);
this._setToken(token);
}
return this.fetchUser();
}
async fetchUser(operation) {
// User endpoint is disabled.
if (!this.options.operations.user) {
this.$auth.setUser({});
return;
}
// Token is required but not available
if (this.options.tokenRequired && !this.$auth.getToken(this.name)) {
return;
}
// Try to fetch user and then set
const user = await this.$auth.requestWith(
this.name,
operation,
this.options.operations.user
);
this.$auth.setUser(user);
}
async logout(operation) {
// Only connect to logout operation if it's configured
if (this.options.operations.logout) {
await this.$auth
.requestWith(this.name, operation, this.options.operations.logout)
.catch(() => {});
}
// But logout locally regardless
if (this.options.tokenRequired) {
this._clearToken();
}
return this.$auth.reset();
}
}
const DEFAULTS = {
tokenRequired: true,
tokenType: "Bearer",
globalToken: true
};
//....
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
"@nuxtjs/axios",
"@nuxtjs/apollo",
"@nuxtjs/auth"
],
//....
auth: {
strategies: {
// local: false,
local: {
_scheme: './authScheme.config',
_name: 'localQL',
endpoints: false,
operations: {
login: {
mutation: loginM,
propertyName: "authenticateEmail.jwtToken",
refetchQueries: [
{
query: currentUserQ
}
]
},
logout: false,
user: { query: currentUserQ, propertyName: "currentUser" }
},
useApollo: true
},
facebook: {
client_id: "1671464192946675",
userinfo_endpoint:
"https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday",
scope: ["public_profile", "email", "user_birthday"]
}
}
}
@YannisMarios
Copy link

YannisMarios commented Mar 21, 2020

Can you please be more specific on how you use these in a real example?

In nuxt.config.js line 13 you write:

_scheme: './authScheme.config',

but your scheme file is apollo.scheme.js

also what is loginM in line 18, and currentUserQ in line 22?

Are they mutation and query respectively that you import from another file?

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment