-
-
Notifications
You must be signed in to change notification settings - Fork 522
-
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:
- 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> } }
- 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
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
Replies: 2 comments 7 replies
-
Could you try vue-apollo which is for Vue 2? @vue/apollo-option is for Vue 3.
Beta Was this translation helpful? Give feedback.
All reactions
-
relies on Apollo Client v2 extensively
Not sure why you get this impression 😅
Beta Was this translation helpful? Give feedback.
All reactions
-
@vue/apollo-options is almost the same code as vue-apollo but with changes to make it work with Vue 3.
Beta Was this translation helpful? Give feedback.
All reactions
-
@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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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).
Beta Was this translation helpful? Give feedback.
All reactions
-
@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) 🙏
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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 🙏
Beta Was this translation helpful? Give feedback.