Change Apollo endpoint in Apollo provider

Question

Is there a way to change the Apollo endpoint after having created the Apollo client? I would like to have the user to input their own endpoint.

Answer 1

httpEndpoint can be a function, and it is called on each query.

As @wrod7 mentioned, you could use localStorage, but global variable should be enought

// vue-apollo.js
export { defaultOptions }

// main.js
import { createProvider, defaultOptions } from './vue-apollo'
window.apolloEndpoint = defaultOptions.httpEndpoint
new Vue({
  router,
  apolloProvider: createProvider({
    cache,
    httpEndpoint: () => window.apolloEndpoint,
  }),
  render: h => h(App),
}).$mount('#app')

and you can set apolloEndpoint anywhere you like, i am using window. to make eslint happy

httpEndpoint is called with current query, so you can conditionally return endpoint based on operationName

vue-apollo got support for multiple clients, it might be useful if you want to override endpoint only on some queries, but i thinks this offtopic

Answer 2

I am doing this on one of my applications. I store the URL string in localstorage or asyncstorage on mobile. you can check for the string when the app loads and have the user enter one if there isn't a url string stored. the application would have to refresh after entering the url and saving it to localstorage.