Использование api композиции nuxt и модуля приложения nuxt

#vue.js #nuxt.js #vue-composition-api #vue-apollo

Вопрос:

Почему я могу использовать модуль nuxt apollo с API композиции nuxt? Если я попытаюсь использовать этот пример плагина:

 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)
  })
})
 

Я понимаю это Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup

Ответ №1:

  1. Установка vue/apollo-составная: npm install --save @vue/apollo-composable
  2. Создайте плагин nuxt(предоставьте-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)
  })
})