Comment utiliser VueJS avec GraphQL ?

Vous souhaitez devenir expert en développement d’applications performantes ? Notre formation React vous permettra de maitriser le développement d’applications monopage avec Redux et TypeScript.

---

L’équipe Ambient IT

Rappels

Qu’est-ce que GraphQL ?

GraphQL est un langage de requête pour les API qui vise à faciliter la communication entre les frontend et les backend. Il est composé de deux types de langages, un langage de requête pour le côté client et un langage de schéma pour le côté serveur.

Qu’est-ce qu’Apollo ?

Apollo est un ensemble d’outils et d’efforts communautaires qui vous aideront à utiliser GraphQL pour vos applications. Apollo est disponible sous forme client et sous forme serveur.

Intégration de VueJS avec GraphQL

Avant d’utiliser VueJS avec GraphQL, il est important de savoir comment intégrer VueJS avec GraphQL.

1ère étape : Installation de la bibliothèque Apollo Client

L’installation de cette bibliothèque permettra d’accéder et de manipuler les données du serveur GraphQL. Pour cela, il suffit d’utiliser la ligne de commande suivante :

npm install apollo-client

2ème étape : Création d’une nouvelle instance Apollo Client

L’objectif de cette étape est de spécifier l’URL du point de terminaison GraphQL. Il suffit d’utiliser la commande :

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

3ème étape : Création d’une nouvelle instance vue

Cette nouvelle instance permettra de passer l’instance ApolloClient en option, pour cela il faut utiliser la commande :

const app = new Vue({
  el: '#app',
  apolloProvider: new VueApollo({
    defaultClient: client,
  }),
});

4ème étape : Configuration de l’instance Vue

L’instance ApolloClient sera utilisé pour effectuer des requêtes sur le serveur GraphQL. Il est possible d’utiliser le code suivant pour interroger tous les utilisateurs de la base de données :

query {
  users {
    id
    name
    email
  }
}

5ème étape : Utilisation des résultats de la requête via l’instance Apolloclient

this.$apollo.query({
  query: USERS_QUERY
}).then(result => {
  // Use the query results here
});

L’intégration de l’application VueJS à GraphQL permet aux développeurs d’accéder et de manipuler facilement des données Quelle que soit la source de manière unifiée. Par conséquent, les développeurs peuvent créer des interfaces utilisateur interactives et dynamiques aisément.

Utiliser VueJS dans GraphQL

Les requêtes

Dans GraphQL, une requête fait appel à une API pour récupérer des données. Vous pouvez effectuer une requête simple en utilisant graphql-tag pour écrire vos requêtes GraphQL :

import gql from 'graphql-tag'

Par la suite, vous pouvez ajouter la requête graphql-tag en valeur :

apollo: {
  // A simple request that refreshes the View 'hello' property
  hello: gql`{hello}`,
},

Il est possible d’initialiser la propriété dans le hook data de votre composant Vue :

data () {
  return {
    // Initialize your Apollo data
    hello: '',
  },
},

En ce qui concerne, le côté serveur, vous pouvez ajouter le schéma et le résolveur via la commande :

export const schema = `
type Query {
  hello: String
}

schema {
  query: Query
}
`

export const resolvers = {
  Query: {
    hello (root, args, context) {
      return 'Hello world!'
    },
  },
}

Options

Afin de déclarer des requêtes Apollo dans les composants Vue, il est important d’ajouter l’objet Apollo dans les options du composant à partir de la commande :

new Vue({
  apollo: {
    // Apollo specific options
  },
})

et dans un fichier vue :

<template>
  <div>Mon composant</div>
</template>

<script>
export default {
  apollo: {
    // Options Apollo View
  }
}
</script>

L’utilitaire $apollo

Chaque composant enfant d’un composant possède l’option apolloProvider et un utilitaire $apollo disponible. Il permet de gérer toutes les parties complexes du composant sans que vous ayez à le faire.

Correspondance de noms

Il faut noter que Vue Apollo ne peut pas savoir quelle donnée vous voulez utiliser dans votre composant depuis le résultat de la requête. Par exemple dans la commande suivante :

apollo: {
  world: gql`query {
    hello
  }`
}

Le world est différent de hello. Par conséquent, il utilisera par défaut le nom que vous utilisez pour la donnée dans le composant. Dans l’exemple ci-dessus, il s’agit de world. Dans le cas où les noms ne correspondent pas, il est possible d’utiliser l’option update pour annoncer à Vue Apollo quelle donnée utiliser pour le résultat :

apollo: {
  world: {
    query: gql`query {
      hello
    }`,
    update: data => data.hello
  }
}

État de chargement

Vous pouvez afficher un état de chargement à l’aide de la prop $apollo.loading :

<div v-if="$apollo.loading">Chargement...</div>

si vous voulez ajouter une requête spécifique, vous pouvez grâce à l’ajout de ping :

<div v-if="$apollo.queries.ping.loading">Chargement...</div>