vue.jsnuxt.jsvue-composition-apivue-apollo

Usage nuxt composition api and nuxt appollo module


Why I can use nuxt apollo module with nuxt composition API? If I try use this plugin example:

import {Context} from '@nuxt/types'
import {
  provide,
  onGlobalSetup,
  defineNuxtPlugin
} from '@nuxtjs/composition-api'
import {DefaultApolloClient} from '@vue/apollo-composable/dist'

/**
 * This plugin will connect @nuxt/apollojs with @vue/apollo-composable
 */

export default defineNuxtPlugin(({app}: Context): void => {
  onGlobalSetup(() => {
    provide(DefaultApolloClient, app.apolloProvider?.defaultClient)
  })
})

I get this Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup


Solution

    1. Install vue/apollo-composable: npm install --save @vue/apollo-composable

    2. Create nuxt plugin(provide-apollo-client.ts):

    import { Context } from '@nuxt/types'
    import {
      onGlobalSetup,
      defineNuxtPlugin
    } from '@nuxtjs/composition-api'
    // @ts-ignore
    import { provideApolloClient } from '@vue/apollo-composable'
    
    /**
     * This plugin will connect @nuxt/apollojs with @vue/apollo-composable
     */
    
    export default defineNuxtPlugin(({ app }: Context): void => {
      onGlobalSetup(() => {
        provideApolloClient(app.apolloProvider?.defaultClient)
      })
    })