Support Vue 2.7 in @vue/apollo-option

[fabis94]

Is your feature request related to a problem? Please describe.
I was able to get @vue/apollo-option working in a Vue 2.7 app, but there were a few issues that I had to work around:

1. The TypeScript types were off, I had to create my own, since the ones in @vue/apollo-option only work with Vue 3. For anyone interested, my type augmentation file looks like this:

// vue-apollo-options.d.ts
import Vue from 'vue'
import { CombinedVueInstance } from 'vue/types/vue'

import { ApolloProvider } from '@vue/apollo-option'
import { DollarApollo } from '@vue/apollo-option/types/vue-apollo'
import { VueApolloComponentOptions } from '@vue/apollo-option/types/options'

type DataDef<Data, Props, V> = Data | ((this: Readonly<Props> & V) => Data)

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue, Data, Methods, Computed, PropsDef, Props> {
    apolloProvider?: ApolloProvider
    apollo?: VueApolloComponentOptions<
      Data extends DataDef<infer D, any, any>
        ? CombinedVueInstance<V, D, Methods, Computed, Props>
        : CombinedVueInstance<V, Data, Methods, Computed, Props>
    >
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $apolloProvider: ApolloProvider
    $apollo: DollarApollo<this>
  }
}

2. Vue 2.7 doesn't support the app.use(apolloProvider) style installation process used by @vue/apollo-option and Vue 3. That said, I was able to successfully install it and get around errors with this kind of installation:

import Vue from 'vue'
import {createApolloProvider} from '@vue/apollo-option'

const apolloProvider = createApolloProvider(...)
Vue.config.globalProperties = Vue.config.globalProperties || {}
Vue.prototype.$apolloProvider = apolloProvider
apolloProvider.install(Vue)

Describe the solution you'd like
It would be great if @vue/apollo-options would be updated to officially support Vue 2.7 without needing to do any workarounds. Even with the current workarounds, there are no guarantees that further versions of the package will work with Vue 2.7, so official support would give us that guarantee.

Describe alternatives you've considered
See my workarounds above

[Akryum]

Could you try vue-apollo which is for Vue 2? @vue/apollo-option is for Vue 3.

[Akryum]

relies on Apollo Client v2 extensively

Not sure why you get this impression 😅

[Akryum]

@vue/apollo-options is almost the same code as vue-apollo but with changes to make it work with Vue 3.

[fabis94]

@Akryum A year back when trying to use VueApollo v3 with @apollo/client, I noticed that even though the package.json mentions @apollo/client (so client v3), all of its TypeScript types still refer to 'apollo-client' (so client v2). I just checked this again and this issue still hasn't been resolved a year later.

It's clear that VueApollo3 is pretty much dead and all effort is going into Vue Apollo 4, so why not enable @vue/apollo-option to also support Vue 2.7, especially if doing so is fairly easy (as shown in my workarounds) and especially if @vue/apollo-composable supports Vue 2.7?

[fabis94]

Just now I installed vue-apollo and pretty much all of my TS typings broke, because the Vue Apollo API typings rely on apollo-* packages (the old apollo client v2 packages).

[fabis94]

@Akryum After multiple days of testing out @vue/apollo-option with my Vue 2.7 setup, everything seems to work correctly and as expected, so I'm going to keep using it. I may not sway you about adding explicit Vue 2.x support to the package, but implicitly it really does work, so I would really appreciate it if this support wouldn't disappear (at least any time soon) 🙏

[aquuleus]

Hi @fabis94 ,

I'm still running Nuxt 2.17.x because of several dependancies that were not migrated over Nuxt3. I recently had to get rid of @nuxtjs/apollo and found @apollo/client, @vue/apollo-option as a replacement. I'm running in the same kind of issues. I did a force install of @vue/apollo-option 4.0.0.

So far, I'm able to inject the "apolloProvider" via a Nuxt plugin, however the "apollo" option does not work. So I thought of doing a Vue.use(...) but ran into the issue you mentioned.

I've tried (but this doesn't work):

const apolloProvider = createApolloProvider(...)
Vue.config.globalProperties = Vue.config.globalProperties || {}
Vue.prototype.$apolloProvider = apolloProvider
apolloProvider.install(Vue)

Below is my current implementation via Inject:

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { createApolloProvider } from '@vue/apollo-option'

export default ({ app }, inject) => {
  // HTTP connection to the API
  const httpLink = createHttpLink({
    // You should use an absolute URL here
    uri: `${app.$config.frontUrl}/graphql`
  })

  // Cache implementation
  const cache = new InMemoryCache()

  // Create the apollo client
  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
    $query: {
      loadingKey: 'loading', // The key to store the loading state in the Apollo cache
      fetchPolicy: 'cache-and-network' // The fetch policy for the query
    }
  })

  const apolloProvider = createApolloProvider({
    defaultClient: apolloClient
  })

  inject('apolloProvider', apolloProvider)
}

It would be great if one of you can provide some help please 🙏