Using vue-apollo.js or vue.config.js to serve graphql apollo server over https?

apollo
1

I must be missing something obvious or simple, but I just cannot figure out how to get the graphql server to run over https.

I made a test app using Vue CLI 3 (vue create test-app). I add vue-apollo plugin using CLI (vue add apollo).

In the sample code in vue-apollo.js it mentions:

const defaultOptions = {
  // You can use 'https' for secure connection (recommended in production)
  httpEndpoint,...

But I cannot see how to adjust that option. I assumed you could do it through the options in that file or through vue.config.js – but maybe I’m wrong?

In vue.config.js I have:

module.exports = {
  pluginOptions: {
    apollo: {
      enableMocks: false,
      enableEngine: false
    }
  },
  devServer: {
    disableHostCheck: true,
    https: true
  }
}

The devServer runs on https at port 8000 with that option set.

What am I missing? I thought maybe it was related to this issue: https://github.com/Akryum/vue-cli-plugin-apollo/issues/52

But that seems to have been resolved. But maybe no option in vue.config.js can effect the server in the way I’m wanting. Is there a way to do this by passing in options somewhere through the vue-apollo plugin? Or is there some other method of which I am unaware.

The constructor in vue-apollo.js looks like this:

export function createProvider (options = {}) {
  // Create apollo client
  //console.log("CREATE PROVIDER CALLED")
  const { apolloClient, wsClient } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler (error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    },
  })
  APOLLO_CLIENT = apolloClient;
  return apolloProvider;
}

And then in in main.js it is called:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import { createProvider } from './vue-apollo'

Vue.config.productionTip = false

new Vue({
  router,
  apolloProvider: createProvider(),
  render: h => h(App)
}).$mount('#app')

I have Express middleware set up, as well, in apollo-server/server.js:

import path from 'path'
import express from 'express'

//const distPath = path.resolve(__dirname, '../dist')
//console.log("DIST PATH: " + distPath);


export default app => {
    
    console.log("GOT HERE")
    app.post('/api', function (req, res, next) {
        res.send('API: ' + '');
      })
    //app.listen(443)
    //app.use(express.static(distPath))
}

But that was just to set up an endpoint to receive POST calls.

I played around with creating a new httpsServer in there with Express but could not get that to have any effect, either. I was following the guidelines here: Apollo SSL Support

Any thoughts?