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