import { ApolloClient } from 'apollo-client' import { createHttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' import { setContext } from 'apollo-link-context' import { reactive, toRefs } from '@vue/composition-api' import useAuth from './auth' let instance = null const apiUrl = process.env.graphqlApi || '/query' const httpLink = createHttpLink({ uri: apiUrl }) const getToken = async options => { const { getTokenSilently, isAuthenticated } = useAuth() if (isAuthenticated.value) { return getTokenSilently.value(options) } return options } const authLink = setContext(async (_, { headers }) => { const token = await getToken() return { headers: { ...headers, authorization: token ? `Bearer ${token}` : '' } } }) const client = new ApolloClient({ link: authLink.concat(httpLink), cache: new InMemoryCache(), defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }) instance = client export const useMutation = (mutation, options) => { const out = reactive({ data: {}, error: null, loading: false }) const doMutate = mutateOptions => new Promise((resolve, reject) => { out.loading = true instance .mutate({ mutation, ...options, ...mutateOptions }) .then(result => { out.loading = false out.data = result.data resolve(result) }) .catch(e => { out.loading = false out.error = e reject(e) }) }) return [doMutate, toRefs(out)] } export const useLazyQuery = (query, options) => { let watchedQuery = null const out = reactive({ data: {}, error: null, loading: false }) const doQuery = queryOptions => new Promise((resolve, reject) => { out.loading = true const effectiveOptions = { query, ...(options || {}), ...(queryOptions || {}) } watchedQuery = instance.watchQuery(effectiveOptions) watchedQuery.subscribe( ({ loading, data }) => { out.loading = loading out.data = data || {} out.error = null resolve(data) }, error => { out.loading = false out.error = error reject(error) } ) }) out.refetch = variables => { const opts = {} if (variables) opts.variables = variables doQuery(opts) } out.startPolling = interval => doQuery({ pollInterval: interval }) out.stopPolling = () => { if (watchedQuery) { watchedQuery.stopPolling() } } return [doQuery, toRefs(out)] } export const useQuery = (query, options) => { const [doQuery, out] = useLazyQuery(query, options) doQuery() return out } // import { execute, makePromise, ApolloLink, Observable } from 'apollo-link'; // import { HttpLink } from 'apollo-link-http'; // const { includeCredentials } = require('./middleware'); // import { onError } from 'apollo-link-error'; // // const defaultGraphUri = process.env.graphqlApi || 'https://shiny-gateway.unbound.se'; // const httpLink = new HttpLink({ uri: defaultGraphUri, fetch: includeCredentials, credentials: 'same-origin' }); // const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => { // if (graphQLErrors) { // console.log('GraphQL errors:', graphQLErrors); // // for (let err of graphQLErrors) { // // switch (err.extensions.code) { // // case 'UNAUTHENTICATED': // // // error code is set to UNAUTHENTICATED // // // when AuthenticationError thrown in resolver // // // // // modify the operation context with a new token // // } // // } // } // if (networkError) { // if (networkError.statusCode === 401) { // return new Observable(observer => { // // webAuth.checkSession(() => { // const subscriber = { // next: observer.next.bind(observer), // error: observer.error.bind(observer), // complete: observer.complete.bind(observer) // }; // // // Retry last failed request // forward(operation).subscribe(subscriber); // // }, (err) => { // // console.log(err); // // observer.error(err) // // }); // }); // } // } // } // );