From b5c7ad0a7bb849d4bd65254eccbe4daf2f0742ab Mon Sep 17 00:00:00 2001 From: Sean Macfarlane Date: Thu, 9 Jul 2020 13:06:53 -0400 Subject: [PATCH] switched apollo boost to apollo client --- app/graphql/mutations.js | 13 +++- app/index.js | 141 +++++++++++++++++++++++---------------- 2 files changed, 95 insertions(+), 59 deletions(-) diff --git a/app/graphql/mutations.js b/app/graphql/mutations.js index add607b..a0eeb0e 100644 --- a/app/graphql/mutations.js +++ b/app/graphql/mutations.js @@ -1,5 +1,15 @@ import gql from 'graphql-tag'; +export const REFRESH_TOKEN = gql` + mutation UpdateToken($refreshToken: String!) { + updateToken(refreshToken: $refreshToken) { + access_token + refresh_token + expires_in + } + } +`; + export const CREATE_LOCATION = gql` mutation CreateLocation( $locationType: String! @@ -67,7 +77,8 @@ export const UPDATE_EQUIPMENT_BULK = gql` export const FILE_UPLOAD = gql` mutation FileUpload($fileName: String, $file: Upload) { fileUpload(fileName: $fileName, file: $file) { - success + fileName + baseUrl } } `; diff --git a/app/index.js b/app/index.js index 58ef968..0dec5b9 100644 --- a/app/index.js +++ b/app/index.js @@ -1,81 +1,106 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Router } from 'react-router-dom'; -import ApolloClient from 'apollo-boost'; +import { ApolloClient } from 'apollo-client'; +import { InMemoryCache } from 'apollo-cache-inmemory'; +import { onError } from 'apollo-link-error'; +import { createUploadLink } from 'apollo-upload-client'; +import { ApolloLink, Observable } from 'apollo-link'; import { ApolloProvider } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; import 'styles/antd.less'; import 'styles/index.scss'; import App from 'containers/App'; import { AUTH_TOKEN } from 'constants/index'; - +import { REFRESH_TOKEN } from 'graphql/mutations'; import { getItem, setItem, removeItem } from 'utils/localStorage'; import history from 'utils/history'; const API_URI = process.env.NODE_ENV === 'development' ? 'http://localhost:4000/' - : 'https://wlan-graphql.zone3.lab.connectus.ai/'; + : 'https://wlan-graphql.tip.lab.connectus.ai/'; const MOUNT_NODE = document.getElementById('root'); -const REFRESH_TOKEN = gql` - mutation UpdateToken($refreshToken: String!) { - updateToken(refreshToken: $refreshToken) { - access_token - refresh_token - expires_in - } - } -`; +const cache = new InMemoryCache(); + +const uploadLink = createUploadLink({ + uri: API_URI, +}); + +const request = async operation => { + const token = getItem(AUTH_TOKEN); + operation.setContext({ + headers: { + authorization: token ? `Bearer ${token.access_token}` : '', + }, + }); +}; + +const requestLink = new ApolloLink( + (operation, forward) => + new Observable(observer => { + let handle; + Promise.resolve(operation) + .then(oper => request(oper)) + .then(() => { + handle = forward(operation).subscribe({ + next: observer.next.bind(observer), + error: observer.error.bind(observer), + complete: observer.complete.bind(observer), + }); + }) + .catch(observer.error.bind(observer)); + + return () => { + if (handle) handle.unsubscribe(); + }; + }) +); const client = new ApolloClient({ - uri: API_URI, - request: operation => { - const token = getItem(AUTH_TOKEN); - operation.setContext({ - headers: { - authorization: token ? `Bearer ${token.access_token}` : '', - }, - }); - }, - onError: ({ graphQLErrors, operation, forward }) => { - if (graphQLErrors) { - graphQLErrors.forEach(err => { - // handle errors differently based on its error code - switch (err.extensions.code) { - case 'FORBIDDEN': - case 'UNAUTHENTICATED': - operation.setContext({ - headers: { - ...operation.getContext().headers, - authorization: client - .mutate({ - mutation: REFRESH_TOKEN, - variables: { - refreshToken: getItem(AUTH_TOKEN).refresh_token, - }, - }) - .then(({ data }) => { - setItem(AUTH_TOKEN, data.updateToken, data.updateToken.expires_in); - return data.updateToken; - }), - }, - }); - return forward(operation); - case 'INTERNAL_SERVER_ERROR': - if (err.path && err.path[0] === 'updateToken') { - removeItem(AUTH_TOKEN); - history.push('/login'); - } - return forward(operation); - default: - return forward(operation); - } - }); - } - }, + link: ApolloLink.from([ + onError(({ graphQLErrors, operation, forward }) => { + if (graphQLErrors) { + graphQLErrors.forEach(err => { + // handle errors differently based on its error code + switch (err.extensions.code) { + case 'FORBIDDEN': + case 'UNAUTHENTICATED': + operation.setContext({ + headers: { + ...operation.getContext().headers, + authorization: client + .mutate({ + mutation: REFRESH_TOKEN, + variables: { + refreshToken: getItem(AUTH_TOKEN).refresh_token, + }, + }) + .then(({ data }) => { + setItem(AUTH_TOKEN, data.updateToken, data.updateToken.expires_in); + return data.updateToken; + }), + }, + }); + return forward(operation); + case 'INTERNAL_SERVER_ERROR': + if (err.path && err.path[0] === 'updateToken') { + removeItem(AUTH_TOKEN); + history.push('/login'); + } + return forward(operation); + default: + return forward(operation); + } + }); + } + }), + requestLink, + uploadLink, + ]), + cache, }); const render = () => {