# Installation

# Plugin Vue CLI

J'ai créé un plugin pour vue-cli (opens new window) afin que vous puissiez ajouter Apollo (ainsi qu'un serveur GraphQL optionnel!) en deux minutes ! ✨🚀

Dans votre projet Vue CLI 3 :

vue add apollo

Ensuite, vous pouvz passer à la section suivante: Premiers pas.

Plus d'informations (opens new window)

# Manuel d'installation

# 1. Apollo Client

Vous pouvez utiliser soit Apollo Boost, soit Apollo Client directement (davantage de configuration).

# Apollo Boost

Apollo Boost est une façon de commencer à utiliser Apollo Client sans rien avoir à configurer. Cela inclut des valeurs par défaut intéressantes, comme les dépendances InMemoryCache et HttpLink recommandées, pré-configurées avec nos paramètres recommandés. C'est parfait pour commencer rapidement.

Installez-le, ainsi que vue-apollo and graphql:

npm install --save vue-apollo graphql apollo-boost

Ou bien :

yarn add vue-apollo graphql apollo-boost

Dans votre application, créez une instance d'ApolloClient :

import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  // Vous devez utiliser un URL absolu
  uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
})

# Apollo Client et configuration complète

Si vous souhaitez plus de contrôle, installez ces packages à la place d'Apollo Boost :

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Ou bien :

yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Dans votre application, créez une instance d'ApolloClient :

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// Connection HTTP à l'API
const httpLink = createHttpLink({
  // Vous devez utiliser un URL absolu
  uri: 'http://localhost:3020/graphql',
})

// Implémentation du cache
const cache = new InMemoryCache()

// Création du client Apollo
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

# 2. Installation du plugin dans Vue

import Vue from 'vue'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

# 3. Apollo provider

Le provider contient les instances du client Apollo qui peuvent ensuite être utilisés par tous les composants enfant.

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

Ajoutez-le à votre application avec l'option apolloProvider:

new Vue({
  el: '#app',
  // Injectez le provider Apollo, comme avec Vue Router ou Vuex
  apolloProvider,
  render: h => h(App),
})

Vous êtes maintenant prêt à utiliser Apollo dans vos composanst !

# Intégration dans l'IDE

# Visual Studio Code

Si vous utilisez VS Code, il est recommandé d'installer l'extension Apollo GraphQL (opens new window).

Ensuite, configurez-la en créant un fichier apollo.config.js à la racine de votre projet Vue:

// apollo.config.js
module.exports = {
  client: {
    service: {
      name: 'my-app',
      // URL de l'API GraphQL
      url: 'http://localhost:3000/graphql',
    },
    // Fichiers traités par extension
    includes: [
      'src/**/*.vue',
      'src/**/*.js',
    ],
  },
}

# WebStorm

Si vous utilisez WebStorm, il est recommandé d'installer l'extension JS GraphQL (opens new window).

Ensuite, configurez-la en créant un fichier .graphqlconfig à la racine de votre projet Vue:

{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "./path/to/schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://url/to/the/graphql/api",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}
Dernière mise à jour: 11/02/2021, 11:08:30