feat: admin auth + config ref + modules sidebar ui + GQL upload (wip)

client/client-app.js

@@ -5,11 +5,10 @@ import VueRouter from 'vue-router'
 import VueClipboards from 'vue-clipboards'
 import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
-import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
 import { BatchHttpLink } from 'apollo-link-batch-http'
 import { ApolloLink, split } from 'apollo-link'
-// import { createHttpLink } from 'apollo-link-http'
 import { WebSocketLink } from 'apollo-link-ws'
+import { createUploadLink } from 'apollo-upload-client'
 import { ErrorLink } from 'apollo-link-error'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { getMainDefinition } from 'apollo-utilities'
@@ -56,6 +55,33 @@ store.commit('user/REFRESH_AUTH')
 const graphQLEndpoint = window.location.protocol + '//' + window.location.host + '/graphql'
 const graphQLWSEndpoint = ((window.location.protocol === 'https:') ? 'wss:' : 'ws:') + '//' + window.location.host + '/graphql-subscriptions'
 
+const graphQLFetch = async (uri, options) => {
+  // Strip __typename fields from variables
+  let body = JSON.parse(options.body)
+  body = body.map(bd => {
+    return ({
+      ...bd,
+      variables: JSON.parse(JSON.stringify(bd.variables), (key, value) => { return key === '__typename' ? undefined : value })
+    })
+  })
+  options.body = JSON.stringify(body)
+
+  // Inject authentication token
+  const jwtToken = Cookies.get('jwt')
+  if (jwtToken) {
+    options.headers.Authorization = `Bearer ${jwtToken}`
+  }
+
+  const resp = await fetch(uri, options)
+
+  // Handle renewed JWT
+  const newJWT = resp.headers.get('new-jwt')
+  if (newJWT) {
+    Cookies.set('jwt', newJWT, { expires: 365 })
+  }
+  return resp
+}
+
 const graphQLLink = ApolloLink.from([
   new ErrorLink(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
@@ -79,7 +105,6 @@ const graphQLLink = ApolloLink.from([
       })
     }
   }),
-  // createPersistedQueryLink(),
   new BatchHttpLink({
     includeExtensions: true,
     uri: graphQLEndpoint,
@@ -93,10 +118,6 @@ const graphQLLink = ApolloLink.from([
           variables: JSON.parse(JSON.stringify(bd.variables), (key, value) => { return key === '__typename' ? undefined : value })
         })
       })
-      // body = {
-      //   ...body,
-      //   variables: JSON.parse(JSON.stringify(body.variables), (key, value) => { return key === '__typename' ? undefined : value })
-      // }
       options.body = JSON.stringify(body)
 
       // Inject authentication token
@@ -117,6 +138,28 @@ const graphQLLink = ApolloLink.from([
   })
 ])
 
+const graphQLUploadLink = createUploadLink({
+  includeExtensions: true,
+  uri: graphQLEndpoint,
+  credentials: 'include',
+  fetch: async (uri, options) => {
+    // Inject authentication token
+    const jwtToken = Cookies.get('jwt')
+    if (jwtToken) {
+      options.headers.Authorization = `Bearer ${jwtToken}`
+    }
+
+    const resp = await fetch(uri, options)
+
+    // Handle renewed JWT
+    const newJWT = resp.headers.get('new-jwt')
+    if (newJWT) {
+      Cookies.set('jwt', newJWT, { expires: 365 })
+    }
+    return resp
+  }
+})
+
 const graphQLWSLink = new WebSocketLink({
   uri: graphQLWSEndpoint,
   options: {
@@ -129,7 +172,7 @@ window.graphQL = new ApolloClient({
   link: split(({ query }) => {
     const { kind, operation } = getMainDefinition(query)
     return kind === 'OperationDefinition' && operation === 'subscription'
-  }, graphQLWSLink, graphQLLink),
+  }, graphQLWSLink, split(operation => operation.getContext().hasUpload, graphQLUploadLink, graphQLLink)),
   cache: new InMemoryCache(),
   connectToDevTools: (process.env.node_env === 'development')
 })