Add compatibility for Options API

[vitkolos]

Your use case

It seems that @nuxtjs/apollo v5 doesn't support Options API. This makes it harder for bigger projects to migrate on Nuxt 3.

The solution you'd like

I would really appreciate if there was a Nuxt 3 compatible version of @nuxtjs/apollo which would allow developers to use Options API.

Possible alternatives

No response

Additional information

No response

[juanjcardona13]

It would be great if new packages have options api support like so vue. Thank you very much for these valuable packages

[rnenjoy]

Yeah that would be great. I'm stuck here with my migration project.

[vitkolos]

@rnenjoy I managed to migrate my project without this package (only using vue/apollo) – and it seems to work. This is my plugins/apollo.js file.

import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from '@apollo/client/core'
import { createApolloProvider } from '@vue/apollo-option'
import { onError } from '@apollo/client/link/error'
import destr from 'destr'

// https://github.com/nuxt-modules/apollo/blob/v5/src/runtime/plugin.ts

export default defineNuxtPlugin(nuxtApp => {
  const cache = new InMemoryCache()
  const { siteUrl, apiPath } = useRuntimeConfig()?.public

  const httpLink = createHttpLink({
    uri: siteUrl + apiPath,
  })

  const errorLink = onError((err) => {
    // nuxtApp.callHook('apollo:error', err)
    // https://www.npmjs.com/package/apollo-link-error
    err.response.errors = undefined;
    // todo: add some error logging (and something else?)
  })

  const link = ApolloLink.from([errorLink, httpLink])

  const apolloClient = new ApolloClient({
    cache,
    link,
    ...(process.server
      ? { ssrMode: true }
      : { ssrForceFetchDelay: 100 }),
  })

  // the original code expects multiple apollo clients
  // here, we have only one, so the key doesn't matter
  const key = 'api'
  const cacheKey = `_apollo:${key}`

  nuxtApp.hook('app:rendered', () => {
    nuxtApp.payload.data[cacheKey] = cache.extract()
  })

  if (process.client && nuxtApp.payload.data[cacheKey]) {
    cache.restore(destr(JSON.stringify(nuxtApp.payload.data[cacheKey])))
  }

  const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
  })

  nuxtApp.vueApp.use(apolloProvider)
})

[adamkhan]

This is important for my migration also. With many components, it's a lot to convert them all immediately to Composition API.

Pinia has it, see https://pinia.vuejs.org/cookbook/options-api.html.

vitkolos congrats! What is the syntax in a component? this.$apollo.query ?

[vitkolos]

@adamkhan I mostly use the apollo option; however, this.$apollo is also available (even though I am not sure how that query method really works).

[adamkhan]

Thanks @vitkolos. I installed vue-apollo and didn't have @vue/apollo-option so installed that as well but am still getting

TypeError: this.$apollo.query is not a function

I guess more needs to be added to the plugin to make this work but I don't know what.

[Update]: Not sure what i was doing last week but the plugin seems to be working for me now at first glance! Thank you for sharing, looks like I can progress now too!

[rnenjoy]

Its very easy to enable options API. Im a open source newbie, so i cant give a commit or something. But only thing needed is to add

PLUGIN.JS / PLUGIN.MJS file.

Add:

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

And at bottom below const defaultClient = clients?.default;

const apolloProvider = createApolloProvider({
		defaultClient,
	})

	nuxtApp.vueApp.use(apolloProvider)

[Diizzayy]

Options API Support was added in #575