Conseils et directives pour l'utilisation de l'API Nuxt Composition et du module Nuxt Apollo

Question

Pourquoi puis-je utiliser le module nuxt apollo avec l'API de composition nuxt ? Si j'essaie d'utiliser cet exemple de plugin :

importer {Context} depuis '@nuxt/types'
importer {
  fournir,
  surGlobalSetup,
  définirNuxtPlugin
} depuis '@nuxtjs/composition-api'
importer {DefaultApolloClient} depuis '@vue/apollo-composable/dist'

/*** Ce plugin connectera @nuxt/apollojs et @vue/apollo-composable*/

export default definitionNuxtPlugin(({app}: Contexte): void => {
  onGlobalSetup(() => {
    fournir (DefaultApolloClient, app.apolloProvider?.defaultClient)
  })
})
J'ai eu cette erreur : Erreur : le client Apollo avec l'identifiant par défaut est introuvable. Utilisez provideApolloClient() si vous êtes en dehors d'une configuration de composant

Answer 1

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

2. Créer le plugin 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)
  })
})