Tipps und Richtlinien zur Verwendung der Nuxt Composition API und des Nuxt Apollo-Moduls

Question

Warum kann ich das Nuxt-Apollo-Modul mit der Nuxt-Composition-API verwenden? Wenn ich versuche, dieses Plugin-Beispiel zu verwenden:

{Context} aus '@nuxt/types' importieren
importieren {
  bieten,
  onGlobalSetup,
  defineNuxtPlugin
} von '@nuxtjs/composition-api'
importiere {DefaultApolloClient} aus '@vue/apollo-composable/dist'

/*** Dieses Plugin verbindet @nuxt/apollojs und @vue/apollo-composable*/

Standard exportieren defineNuxtPlugin(({app}: Context): void => {
  onGlobalSetup(() => {
    Provide(DefaultApolloClient, app.apolloProvider?.defaultClient)
  })
})

Ich habe diesen Fehler erhalten: Fehler: Apollo-Client mit ID-Standard nicht gefunden. Verwenden Sie ProvideApolloClient(), wenn Sie sich außerhalb eines Komponenten-Setups befinden.

Answer 1

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

2. 创建 nuxt 插件（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)
  })
})