Petua dan garis panduan untuk menggunakan API Komposisi Nuxt dan modul Nuxt Apollo

Question

Mengapa saya boleh menggunakan modul nuxt apollo dengan API gubahan nuxt? Jika saya cuba menggunakan contoh pemalam ini:

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

/*** Pemalam ini akan menyambungkan @nuxt/apollojs dan @vue/apollo-composable*/

eksport lalai defineNuxtPlugin(({app}: Context): void ==> {
  onGlobalSetup(() => {
    sediakan(DefaultApolloClient, app.apolloProvider?.defaultClient)
  })
})

Saya mendapat ralat ini: Ralat: Pelanggan Apollo dengan id lalai tidak ditemui Gunakan provideApolloClient() jika anda berada di luar persediaan komponen

Answer 1

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

2. Buat pemalam 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)
  })
})