From 8dcb9d0bf19cb03a338c75c9dbd83a58b5d17e9e Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 20:03:34 +0100
Subject: [PATCH 01/38] chore: add meta information for the French translation

---
 packages/docs/src/.vuepress/config.js | 100 ++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index ee435059..76d14f5a 100644
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -14,6 +14,11 @@ module.exports = {
       lang: 'zh-CN',
       title: 'Vue Apollo',
       description: '🚀 在你的 Vue.js 应用中集成 GraphQL！',
+    },
+    '/fr/': {
+      lang: 'fr-FR',
+      title: 'Vue Apollo',
+      description: '🚀 Intégrez GraphQL dans vos apps Vue.js !',
     }
   },
   plugins: {
@@ -223,6 +228,101 @@ module.exports = {
           '/zh-cn/migration/': [''],
         },
       },
+      '/fr/': {
+        selectText: 'Languages',
+        label: 'Français',
+        lastUpdated: 'Dernière mise à jour',
+        nav: [
+          {
+            text: 'Guide',
+            link: '/guide/',
+          },
+          {
+            text: 'API',
+            link: '/api/',
+          },
+          {
+            text: 'Migration',
+            link: '/migration/',
+          },
+          {
+            text: 'Plugin CLI',
+            link: 'https://github.com/Akryum/vue-cli-plugin-apollo',
+          },
+          {
+            text: 'Sponsor',
+            link: 'https://github.com/sponsors/Akryum',
+          },
+        ],
+        sidebarDepth: 2,
+        sidebar: {
+          '/guide/': [
+            '',
+            'installation',
+            {
+              title: 'Premiers pas',
+              collapsable: false,
+              children: [
+                'apollo/',
+                'apollo/queries',
+                'apollo/mutations',
+                'apollo/subscriptions',
+                'apollo/pagination',
+                'apollo/special-options',
+              ],
+            },
+            {
+              title: 'Composants',
+              collapsable: false,
+              children: [
+                'components/',
+                'components/query',
+                'components/mutation',
+                'components/subscribe-to-more',
+              ],
+            },
+            {
+              title: 'Utilisation avancée',
+              collapsable: false,
+              children: [
+                'multiple-clients',
+                'ssr',
+                'local-state',
+                'testing',
+              ],
+            },
+          ],
+          '/api/': [
+            {
+              title: 'Vue Apollo',
+              collapsable: false,
+              children: [
+                'apollo-provider',
+                'dollar-apollo',
+                'ssr',
+              ],
+            },
+            {
+              title: 'Smart Apollo',
+              collapsable: false,
+              children: [
+                'smart-query',
+                'smart-subscription',
+              ],
+            },
+            {
+              title: 'Apollo Components',
+              collapsable: false,
+              children: [
+                'apollo-query',
+                'apollo-mutation',
+                'apollo-subscribe-to-more',
+              ],
+            },
+          ],
+          '/migration/': [''],
+        },
+      },
     },
   },
 }

From 368288bf2352d903429428ad7452801cde66bd1c Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 20:03:52 +0100
Subject: [PATCH 02/38] feat: translate README

---
 packages/docs/src/fr/README.md | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/docs/src/fr/README.md

diff --git a/packages/docs/src/fr/README.md b/packages/docs/src/fr/README.md
new file mode 100644
index 00000000..ec204163
--- /dev/null
+++ b/packages/docs/src/fr/README.md
@@ -0,0 +1,50 @@
+---
+home: true
+heroImage: /logo.png
+actionText: Commencer →
+actionLink: /guide/
+features:
+- title: Rafraîchissements automatiques
+  details: Ne vous préoccupez pas de refraîchir l'interface utilisteur ou de refaire les requêtes !
+- title: Composants dans les templates
+  details: Utilisez Apollo de façon vraiment déclarative grâce aux composants Apollo.
+- title: Compatible avec le rendu côté serveur
+  details: Faites vos requêtes côté serveur avant de rendre le HTML.
+footer: LICENCE MIT - Créé par Guillaume CHAU (@Akryum)
+---
+
+<sponsor-button/>
+
+## Sponsors
+
+### Or
+
+<p class="sponsors">
+  <a href="https://www.sumcumo.com/en/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" class="gold-sponsor">
+  </a>
+
+  <a href="https://www.vuemastery.com/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" class="gold-sponsor">
+  </a>
+</p>
+
+### Argent
+
+<p class="sponsors">
+  <a href="https://vueschool.io/" target="_blank">
+    <img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
+  </a>
+</p>
+
+### Bronze
+
+<p class="sponsors">
+  <a href="https://vuetifyjs.com" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png" alt="Vuetify logo" class="bronze-sponsor">
+  </a>
+
+  <a href="https://www.frontenddeveloperlove.com/" target="_blank" title="Frontend Developer Love">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png" alt="Frontend Developer Love logo" class="bronze-sponsor">
+  </a>
+</p>

From 4d6e99dbf0fb381aeae17566d2b2988c2805fc39 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 20:04:13 +0100
Subject: [PATCH 03/38] feat: translate migration guide

---
 packages/docs/src/fr/migration/README.md | 196 +++++++++++++++++++++++
 1 file changed, 196 insertions(+)
 create mode 100644 packages/docs/src/fr/migration/README.md

diff --git a/packages/docs/src/fr/migration/README.md b/packages/docs/src/fr/migration/README.md
new file mode 100644
index 00000000..2ecc2615
--- /dev/null
+++ b/packages/docs/src/fr/migration/README.md
@@ -0,0 +1,196 @@
+# De vue-apollo 2 à Apollo 1
+
+Les principaux changements concernent la mise en place du client Apollo. Le code à l'intérieur de vos composants ne devraient pas être affectés. Apollo utilise désormais [apollo-link](https://github.com/apollographql/apollo-link), un système plus flexible qui permet de composer plusieurs liens et permettre plus de choses (traitement par lots, support hors-connexion, et plus encore).
+
+## Installation
+
+### Packages
+
+Avant:
+
+```
+npm install --save vue-apollo apollo-client
+```
+
+Après:
+
+```
+npm install --save vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
+```
+
+### Imports
+
+Avant:
+
+```js
+import Vue from 'vue'
+import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
+import VueApollo from 'vue-apollo'
+```
+
+Après:
+
+```js
+import Vue from 'vue'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import VueApollo from 'vue-apollo'
+```
+
+### Apollo Setup
+
+Avant:
+
+```js
+// Création de l'interface réseau
+const networkInterface = createNetworkInterface({
+  uri: 'http://localhost:3000/graphql',
+  transportBatching: true,
+})
+
+// Création de la souscription au client websocket
+const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
+  reconnect: true,
+})
+
+// Extension de l'interface réseau avec la souscription au client
+const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
+  networkInterface,
+  wsClient,
+)
+
+// Création du client Apollo avc la nouvell interface réseau
+const apolloClient = new ApolloClient({
+  networkInterface: networkInterfaceWithSubscriptions,
+  connectToDevTools: true,
+})
+```
+
+Après:
+
+```js
+const httpLink = new HttpLink({
+  // Vous devez utiliser un URL absolu
+  uri: 'http://localhost:3020/graphql',
+})
+
+// Création du lien websocket
+const wsLink = new WebSocketLink({
+  uri: 'ws://localhost:3000/subscriptions',
+  options: {
+    reconnect: true,
+  },
+})
+
+// En utilisant la possibilité de scinder les liens, vous pouvez envoyer
+// des données à chaque lien en fonction du type d'opération envoyé
+const link = split(
+  // Scission basée sur le type d'opération
+  ({ query }) => {
+    const { kind, operation } = getMainDefinition(query)
+    return kind === 'OperationDefinition' &&
+      operation === 'subscription'
+  },
+  wsLink,
+  httpLink
+)
+
+// Création du client Apollo
+const apolloClient = new ApolloClient({
+  link,
+  cache: new InMemoryCache(),
+  connectToDevTools: true,
+})
+```
+
+### Plugin Setup
+
+Avant:
+
+```js
+// Création du client Apollo
+const apolloClient = new ApolloClient({
+  networkInterface: createBatchingNetworkInterface({
+    uri: 'http://localhost:3020/graphql',
+  }),
+  connectToDevTools: true,
+})
+
+// Intallation du plugin Vue
+Vue.use(VueApollo, {
+  apolloClient,
+})
+
+new Vue({
+  // ...
+})
+```
+
+Après:
+
+```js
+const httpLink = new HttpLink({
+  // Vous devez utiliser un URL absolu
+  uri: 'http://localhost:3020/graphql',
+})
+
+// Création du client Apollo
+const apolloClient = new ApolloClient({
+  link: httpLink,
+  cache: new InMemoryCache(),
+  connectToDevTools: true,
+})
+
+// Intallation du plugin Vue
+Vue.use(VueApollo)
+
+// Création d'un provider
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+})
+
+// Utilisation du provider
+new Vue({
+  apolloProvider,
+  // ...
+})
+```
+
+## Mutations
+
+Les query reducers ont été retirés. Utilisez l'API `update` pour mettre le cache à jour.
+
+## Souscriptions
+
+### Packages
+
+Avant:
+
+```
+npm install --save subscriptions-transport-ws
+```
+
+Après:
+
+```
+npm install --save apollo-link-ws apollo-utilities
+```
+
+### Imports
+
+Avant:
+
+```js
+import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
+```
+
+Après:
+
+```js
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+```
+
+Pour plus d'informations, visitez la [documentation Apollo officielle]https://www.apollographql.com/docs/react/v2.5/recipes/2.0-migration.
\ No newline at end of file

From b9053af7f213a70cfec916a4ae49ebdc1fec20e0 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 20:18:36 +0100
Subject: [PATCH 04/38] feat: translate guide README

---
 packages/docs/src/fr/guide/README.md | 67 ++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/README.md

diff --git a/packages/docs/src/fr/guide/README.md b/packages/docs/src/fr/guide/README.md
new file mode 100644
index 00000000..2928e445
--- /dev/null
+++ b/packages/docs/src/fr/guide/README.md
@@ -0,0 +1,67 @@
+# Introduction
+
+Cette bibliothèque intègre [Apollo](https://www.apollographql.com/) dans vos composants [Vue](http://vuejs.org) grâce à des requêtes déclaratives. Compatible avec Vue 2.0+ and 3.0+.
+
+[➡️ Installer](./installation.md)
+
+## Sponsors
+
+### Or
+
+<p class="sponsors">
+  <a href="https://www.sumcumo.com/en/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" class="gold-sponsor">
+  </a>
+
+  <a href="https://www.vuemastery.com/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" class="gold-sponsor">
+  </a>
+</p>
+
+### Argent
+
+<p class="sponsors">
+  <a href="https://vueschool.io/" target="_blank">
+    <img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
+  </a>
+</p>
+
+### Bronze
+
+<p class="sponsors">
+  <a href="https://vuetifyjs.com" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png" alt="Vuetify logo" class="bronze-sponsor">
+  </a>
+
+  <a href="https://www.frontenddeveloperlove.com/" target="_blank" title="Frontend Developer Love">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png" alt="Frontend Developer Love logo" class="bronze-sponsor">
+  </a>
+</p>
+
+## Devenir sponsor
+
+Votre entreprise utilise `vue-apollo` ou `vue-cli-plugin-apollo` pour créer de super apps ? Rejoignez les autres sponsors et ajoutez votre logo dans cette documentation ! En me soutenant sur GitHub, vous me permettez de passer moins de temps au travail et plus sur des projets open source comme `vue-apollo` ! Merci !
+
+<sponsor-button/>
+
+## Qu'est-ce GraphQL?
+
+[GraphQL](https://graphql.org/) est une spécification qui a pour but de faciliter la communication entre le front end et le back end. C'est composé principalement d'un langage de schéma pour le serveur et un langage de requête pour le client.
+
+## Qu'est-ce qu'Apollo?
+
+[Apollo](https://www.apollographql.com/) est un ensemble d'outils supporté par la communauté pour aider à l'utilisation de GraphQL dans vos apps. Apollo est connu pour son [client](https://www.apollographql.com/client) et son [serveur](https://www.apollographql.com/server). Apollo est développé et soutenu par le [Meteor Development Group](https://www.meteor.io/).
+
+## Liens
+
+[<img src="https://github.com/fluidicon.png" alt="icon" width="16" height="16"/> Plugin Vue CLI](https://github.com/Akryum/vue-cli-plugin-apollo)
+
+[<img src="https://github.com/fluidicon.png" alt="icon" width="16" height="16"/> Plus d'examples vue-apollo](https://github.com/Akryum/vue-apollo-example)
+
+[<img src="https://github.com/fluidicon.png" alt="icon" width="16" height="16"/> Example d'un serveur Apollo GraphQL](https://github.com/Akryum/apollo-server-example)
+
+[<img src="https://www.howtographql.com/static/howtographql.d1a2e5b4.svg" alt="icon" width="16" height="16"/> Comment utiliser GraphQL](https://www.howtographql.com/vue-apollo/0-introduction/)
+
+[<img src="https://conf.vuejs.org/img/logo-48.png" alt="icon" width="16" height="16"/> Demo VueConf 2017](https://github.com/Akryum/vueconf-2017-demo) &amp; [slides](http://slides.com/akryum/graphql#/)
+
+[<img src="https://github.com/fluidicon.png" alt="icon" width="16" height="16"/> Example Devfest Summit](https://github.com/Akryum/devfest-nantes-2017) (avec un tas de fonctionnalités comme le rendu côté serveur, OAuth, rafraîchissements automatiques, Apollo Engine...)

From 1b7a7caa3ec077bbdf8e56401e5ed9025518f86b Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 21:26:17 +0100
Subject: [PATCH 05/38] fix: add space before colon

---
 packages/docs/src/fr/migration/README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/docs/src/fr/migration/README.md b/packages/docs/src/fr/migration/README.md
index 2ecc2615..72e78404 100644
--- a/packages/docs/src/fr/migration/README.md
+++ b/packages/docs/src/fr/migration/README.md
@@ -6,13 +6,13 @@ Les principaux changements concernent la mise en place du client Apollo. Le code
 
 ### Packages
 
-Avant:
+Avant :
 
 ```
 npm install --save vue-apollo apollo-client
 ```
 
-Après:
+Après :
 
 ```
 npm install --save vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
@@ -20,7 +20,7 @@ npm install --save vue-apollo@next graphql apollo-client apollo-link apollo-link
 
 ### Imports
 
-Avant:
+Avant :
 
 ```js
 import Vue from 'vue'
@@ -28,7 +28,7 @@ import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
 import VueApollo from 'vue-apollo'
 ```
 
-Après:
+Après :
 
 ```js
 import Vue from 'vue'
@@ -40,7 +40,7 @@ import VueApollo from 'vue-apollo'
 
 ### Apollo Setup
 
-Avant:
+Avant :
 
 ```js
 // Création de l'interface réseau
@@ -67,7 +67,7 @@ const apolloClient = new ApolloClient({
 })
 ```
 
-Après:
+Après :
 
 ```js
 const httpLink = new HttpLink({
@@ -106,7 +106,7 @@ const apolloClient = new ApolloClient({
 
 ### Plugin Setup
 
-Avant:
+Avant :
 
 ```js
 // Création du client Apollo
@@ -127,7 +127,7 @@ new Vue({
 })
 ```
 
-Après:
+Après :
 
 ```js
 const httpLink = new HttpLink({
@@ -165,13 +165,13 @@ Les query reducers ont été retirés. Utilisez l'API `update` pour mettre le ca
 
 ### Packages
 
-Avant:
+Avant :
 
 ```
 npm install --save subscriptions-transport-ws
 ```
 
-Après:
+Après :
 
 ```
 npm install --save apollo-link-ws apollo-utilities
@@ -179,13 +179,13 @@ npm install --save apollo-link-ws apollo-utilities
 
 ### Imports
 
-Avant:
+Avant :
 
 ```js
 import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
 ```
 
-Après:
+Après :
 
 ```js
 import { split } from 'apollo-link'

From a292da1299a24e97902f6b87018d40dcf84cb2ad Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 21:26:50 +0100
Subject: [PATCH 06/38] feat: translate installation guide

---
 packages/docs/src/fr/guide/installation.md | 167 +++++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/installation.md

diff --git a/packages/docs/src/fr/guide/installation.md b/packages/docs/src/fr/guide/installation.md
new file mode 100644
index 00000000..b0fc68d7
--- /dev/null
+++ b/packages/docs/src/fr/guide/installation.md
@@ -0,0 +1,167 @@
+# Installation
+
+## Vue CLI Plugin
+
+J'ai créé un plugin pour [vue-cli](http://cli.vuejs.org) afin que vous puissiez ajouter Apollo (ainsi qu'un serveur GraphQL optionnel!) en deux minutes ! ✨🚀
+
+Dans votre projet Vue CLI 3 :
+
+```bash
+vue add apollo
+```
+
+Ensuite, vous pouvz passer à la section suivante: [Premiers pas](./apollo/).
+
+[Plus d'informations](https://github.com/Akryum/vue-cli-plugin-apollo)
+
+## Manuel d'installation
+
+### 1. Apollo Client
+
+Vous pouvez utiliser soit [Apollo Boost](#apollo-boost), soit [Apollo Client directement](#apollo-client-full-configuration) (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` :
+
+```js
+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` :
+
+```js
+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
+
+```js
+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.
+
+```js
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+})
+```
+
+Ajoutez-le à votre application avec l'option `apolloProvider`:
+
+```js
+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](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo).
+
+Ensuite, configurez-la en créant un fichier `apollo.config.js` à la racine de votre projet Vue:
+
+```js
+// 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](https://plugins.jetbrains.com/plugin/8097-js-graphql/).
+
+Ensuite, configurez-la en créant un fichier `.graphqlconfig` à la racine de votre projet Vue:
+
+```graphqlconfig
+{
+  "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
+      }
+    }
+  }
+}
+```

From c1a3a035ec97c1c87b1370f1effa2fc2c48614ab Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 22:26:49 +0100
Subject: [PATCH 07/38] feat: translate local state guide

---
 packages/docs/src/fr/guide/local-state.md | 281 ++++++++++++++++++++++
 1 file changed, 281 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/local-state.md

diff --git a/packages/docs/src/fr/guide/local-state.md b/packages/docs/src/fr/guide/local-state.md
new file mode 100644
index 00000000..7d5b5275
--- /dev/null
+++ b/packages/docs/src/fr/guide/local-state.md
@@ -0,0 +1,281 @@
+# État local
+
+## Pourquoi utiliser Apollo comme gestionnaire d'état local?
+
+Quand vous faites des requêtes GraphQL abec Apollo, les résultats sont stockés dans le **cache Apollo**. Maintenant, imaginez que vous ayez également besoin d'un état applicatif local et de le mettre à disposition de plusieurs composants. Normalement, dans une application Vue, nous utilisons [Vuex](https://vuex.vuejs.org/) pour ça. Mais utiliser Apollo et Vuex en même temps implique de stocker la donnée à deux endroits différents, ce qui donne lieu à _deux sources de vérité_.
+
+La bonne nouvelle, c'est qu'Apollo a un mécanisme pour stocker l'état applicatif local en cache. Auparavant, il utilisait la bibliothèque [apollo-link-state](https://github.com/apollographql/apollo-link-state) pour cela. Depuis la sortie d'Apollo 2.5, cette fonctionnalité est inclue dans Apollo.
+
+## Créer un schéma local
+
+Tout comme créer un schéma GraphQL est la première étape pour définir un modèle de données sur le serveur, écrire un schéma local est la première étape côté client.
+
+Créons donc un schéma local pour décrire le premier élément d'une liste de tâches à accomplir ("todo"). Cette tâche comporte du texte, une propriété qui détermine si ell est déja achevée, et un identifiant pour distinguer les tâches entre elles. On la représente donc sous la forme d'un objet avec trois propriétés :
+
+```js
+{
+  id: 'identifiantUnique',
+  text: 'Du texte',
+  done: false
+}
+```
+
+Nous sommes maintenant prêts à ajouter un type `Item` à notre schéma GraphQL.
+
+```js
+// main.js
+
+import gql from 'graphql-tag';
+
+export const typeDefs = gql`
+  type Item {
+    id: ID!
+    text: String!
+    done: Boolean!
+  }
+`;
+```
+
+`qgl` est un gabarit étiqueté qui analyse les requêtes GraphQL.
+
+Nous devons maintenant ajouter `typeDefs` à notre client Apollo.
+
+```js{4-5}
+// main.js
+
+const apolloClient = new ApolloClient({
+  typeDefs,
+  resolvers: {},
+});
+```
+
+:::warning WARNING
+Comme vous pouvez le constater, nous avons également ajouté un objet `resolvers` vide : si nous oublions de l'ajouter dans les options du client Apollo, il ne pourra pas reconnaître les requêtes vers l'état local et tentera de les envoyer à des URLs distants à la place.
+:::
+
+## Étendre un schéma GraphQL distant localement
+
+Vous pouvez non seulement créet un schéma local à partir de zéro, mais aussi ajouter des **champs virtuels** locaux à votre schéma distant. Ces champs existent uniquement côté client, et sont parfaits pour injecter de l'état local à votre donnée serveur.
+
+Imaginez que nous ayons un type `User` dans notre schéma distant :
+
+```js
+type User {
+  name: String!
+  age: Int!
+}
+```
+
+Et que nous souhaitions ajouter une propriété locale à `User` :
+
+```js
+export const schema = gql`
+  extend type User {
+    twitter: String
+  }
+`;
+```
+
+Maintenant, quand vous requêtez un utilisateur, il vous faudra spécifier que le champ `twitter` est local :
+
+```js
+const userQuery = gql`
+  user {
+    name
+    age
+    twitter @client
+  }
+`;
+```
+
+## Initialiser un cache Apollo
+
+Pour initialiser un cach Apollo dans votre application, vous devez utiliser un constructeur `InMemoryCache`. Tout d'abord, importez-le dans votre fichier principal :
+
+```js{4,6}
+// main.js
+
+import ApolloClient from 'apollo-boost';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
+const cache = new InMemoryCache();
+```
+
+Nous pouvons maintenant l'ajouter aux options de notre client Apollo :
+
+```js{4}
+// main.js
+
+const apolloClient = new ApolloClient({
+  cache,
+  typeDefs,
+  resolvers: {},
+});
+```
+
+Pour l'instant, le cache est vide. Pour y ajouter des données initiales, nous deevons utiliser la méthode `writeData` :
+
+```js{9-20}
+// main.js
+
+const apolloClient = new ApolloClient({
+  cache,
+  typeDefs,
+  resolvers: {},
+});
+
+cache.writeData({
+  data: {
+    todoItems: [
+      {
+        __typename: 'Item',
+        id: 'dqdBHJGgjgjg',
+        text: 'test',
+        done: true,
+      },
+    ],
+  },
+});
+```
+
+Nous venons d'ajouter un tableau de `todoItems` à notre cache et nous avons déterminé que chaque élément a un `__typename` nommé `Item` (spécifié dans notre schéma local).
+
+## Requêter de la donnée locale
+
+Requêter le cache local est similaire à [envoyer des requêtes GraphQL à un serveur distant](apollo/queries.md). D'abord, nous devons créer une requête :
+
+```js
+// App.vue
+
+import gql from 'graphql-tag';
+
+const todoItemsQuery = gql`
+  {
+    todoItems @client {
+      id
+      text
+      done
+    }
+  }
+`;
+```
+
+La différence principale avec des requêtes distantes est la directive `@client`. Elle spécifie que cette requête ne doit pas être exécutée vers l'API GraphQL distante. À la place, le client Apollo doit récupérer les résultats depuis le cache local.
+
+Nous pouvons maintenant utiliser cette requête dans notre composant Vue comme n'import quelle requête Apollo :
+
+```js
+// App.vue
+
+apollo: {
+  todoItems: {
+    query: todoItemsQuery
+  }
+},
+```
+
+## Changer de la donnée locale avec des mutations
+
+Il existe deux façons différentes de modifier la donnée locale :
+
+- l'écrire directement avec la méthode `writeData` comme nous l'avons fait lors de [l'initialisation du cache](#initializing-an-apollo-cache);
+- invoquer une mutation GraphQL.
+
+Ajoutons quelques mutations à notre [schéma GraphQL local](#creating-a-local-schema) :
+
+```js{10-14}
+// main.js
+
+export const typeDefs = gql`
+  type Item {
+    id: ID!
+    text: String!
+    done: Boolean!
+  }
+
+  type Mutation {
+    checkItem(id: ID!): Boolean
+    addItem(text: String!): Item
+  }
+`;
+```
+
+La mutation `checkItem` inversera la propriété booléenne `done` d'un élément donné. Créons-la en utilisant `gql` :
+
+```js
+// App.vue
+
+const checkItemMutation = gql`
+  mutation($id: ID!) {
+    checkItem(id: $id) @client
+  }
+`;
+```
+
+Nous avons défini une mutation _locale_ (car nous utilisons la directive `@client`) qui accepte un identifiant unique en paramètre. Maintenant, il nous faut un _résolveur_: une fonction qui résout une valeur pour un type ou un champ dans un schéma.
+
+
+Dans notre cas, le résolveur définit les changements que nous souhaitons apporter à notre cache local Apollo quand nous avons certaines mutations. Les résolveurs locaux ont la même signature que les distants (`(parent, args, context, info) => data`). En réalité, nous aurons uniquement besoin d'`args` (les arguments passés à la mutation) et de `context` (nous aurons besoin de ses propriétés de cache pour lire et écrire de la donnée).
+
+Ajoutons donc un résolveur à notre fichier principal :
+
+```js
+// main.js
+
+const resolvers = {
+  Mutation: {
+    checkItem: (_, { id }, { cache }) => {
+      const data = cache.readQuery({ query: todoItemsQuery });
+      const currentItem = data.todoItems.find(item => item.id === id);
+      currentItem.done = !currentItem.done;
+      cache.writeQuery({ query: todoItemsQuery, data });
+      return currentItem.done;
+    },
+};
+```
+
+Que se passe-t-il ici ?
+
+1. on lit `todoItemsQuery` depuis notre cache pour voir quelles `todoItems` nous avons;
+2. on cherche un élément qui possède un certain identifiant;
+3. on inverse la propriété `done` de l'élément récupéré;
+4. on écrit nos `todoItems` modifiées en cache;
+5. on retourne la propriété `done` comme résultat de mutation.
+
+Nous devons maintenant remplacer notre objet `resolvers` vide avec nos nouveaux `resolvers` dans les options du client Apollo :
+
+```js{17}
+// main.js
+
+const resolvers = {
+  Mutation: {
+    checkItem: (_, { id }, { cache }) => {
+      const data = cache.readQuery({ query: todoItemsQuery });
+      const currentItem = data.todoItems.find(item => item.id === id);
+      currentItem.done = !currentItem.done;
+      cache.writeQuery({ query: todoItemsQuery, data });
+      return currentItem.done;
+    },
+};
+
+const apolloClient = new ApolloClient({
+  cache,
+  typeDefs,
+  resolvers,
+});
+```
+
+Après cela, nous pouvons utiliser notre mutation dans notre composant Vue comme n'importe quelle [mutation](apollo/mutations.md):
+
+```js
+// App.vue
+
+methods: {
+  checkItem(id) {
+    this.$apollo.mutate({
+      mutation: checkItemMutation,
+      variables: { id }
+    });
+  },
+}
+```

From fd034033fd3726b0e6ccf0d4bd974141708fec27 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 22:37:09 +0100
Subject: [PATCH 08/38] feat: translate multiple clients guide

---
 .../docs/src/fr/guide/multiple-clients.md     | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/multiple-clients.md

diff --git a/packages/docs/src/fr/guide/multiple-clients.md b/packages/docs/src/fr/guide/multiple-clients.md
new file mode 100644
index 00000000..e3afea4e
--- /dev/null
+++ b/packages/docs/src/fr/guide/multiple-clients.md
@@ -0,0 +1,72 @@
+# Clients multiples
+
+Vous pouvez spécifier plusieurs client Apollo si votre application doit se connecter à différents serveurs GraphQL :
+
+```js
+const defaultOptions = {
+  // Vous pouvez utiliser `wss` pour sécuriser la connexion (recommandé en production)
+  // Utilisez `null` pour désactiver les souscriptions
+  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',
+  // Jeton LocalStorage
+  tokenName: AUTH_TOKEN,
+  // Activation des requêtes persistées automatiquement avec Apollo Engine
+  persisting: false,
+  // Utilisation générale des websockets (pas de requêtes HTTP)
+  // Il vous faudra passer un `wsEndpoint` pour que ça fonctionne
+  websocketsOnly: false,
+  // Rendu côté serveur ?
+  ssr: false,
+}
+
+const clientAOptions = {
+  // Utilisez `https` pour sécuriser la connexion (recommandé en production)
+  httpEndpoint: 'http://localhost:4000/graphql',
+}
+
+const clientBOptions = {
+  httpEndpoint: 'http://example.org/graphql',
+}
+
+// Invoquez cette fonction dans votre fichier d'application Vue
+export function createProvider (options = {}) {
+  const createA= createApolloClient({
+    ...defaultOptions,
+    ...clientAOptions,
+  });
+
+  const createB = createApolloClient({
+    ...defaultOptions,
+    ...clientBOptions,
+  });
+
+  const a = createA.apolloClient;
+  const b = createB.apolloClient;
+
+  // Création du provider Vue Apollo
+  const apolloProvider = new VueApollo({
+    clients: {
+      a,
+      b
+    }
+    defaultClient: a,
+})
+```
+
+Dans l'option `apollo` du composant, vous pouvez définir un client pour toutes vos requêtes, souscriptions, et mutations avec `$client` (uniquement pour ce composant) :
+
+```js
+export default {
+  apollo: {
+    $client: 'b',
+  },
+}
+```
+
+Vous pouvez également sp"cifier le client dans chaque requête, souscription et mutation grâce à l'option `client`:
+
+```js
+tags: {
+  query: gql`...`,
+  client: 'b',
+}
+```

From ff184815d5e24ae7eef65d18887db6dac14b8084 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 23:02:48 +0100
Subject: [PATCH 09/38] feat: translate testing guide

---
 packages/docs/src/fr/guide/testing.md | 186 ++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/testing.md

diff --git a/packages/docs/src/fr/guide/testing.md b/packages/docs/src/fr/guide/testing.md
new file mode 100644
index 00000000..27877afe
--- /dev/null
+++ b/packages/docs/src/fr/guide/testing.md
@@ -0,0 +1,186 @@
+# Tests
+
+Pour tester unitairement vos requêtes et vos mutations Vue Apollo, vous pouvez faire des tests simples, ou bien tester avec un schéma GraphQL mocké. Tous les exemples documentés utilisent [Jest](https://jestjs.io/) et [vue-test-utils](https://github.com/vuejs/vue-test-utils).
+
+## Tests simples
+
+Pour tester une requête, vous pouvez simplement assigner de la donnée au composant et rgarder comment il est rendu grâce aux snapshots Jest. Imaginons que vous ayez une requête pour récupérer les héros de Vue, vous pouvez ajouter une fausse liste avec un seul héros :
+
+```js
+test('affiche les héros correctement avec la donnée requêtée', () => {
+  const wrapper = shallowMount(App, { localVue })
+  wrapper.setData({
+    allHeroes: [
+      {
+        id: 'un-identifiant',
+        name: 'Evan You',
+        image: 'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
+        twitter: 'youyuxi',
+        github: 'yyx990803',
+      },
+    ],
+  })
+  expect(wrapper.element).toMatchSnapshot()
+})
+```
+
+Pour un simple test de mutation, vous devez vérifier que la méthode `mutate` d'`$apollo` a été appelée dans votre composant. Dans l'exemple qui suit, la mutation a été appelée dans la méthode `addHero` :
+
+```js
+test('appelle la mutation Apollo dans la méthode `addHero`', () => {
+  const mutate = jest.fn()
+  const wrapper = mount(App, {
+    localVue,
+    mocks: {
+      $apollo: {
+        mutate,
+      },
+    },
+  })
+  wrapper.vm.addHero()
+  expect(mutate).toBeCalled()
+})
+```
+
+### Tester l'état de chargement en mockant `$apollo`
+
+Si vous souhaitez tester ce que votre composant affiche lorsque les résultats de votre requête GraphQL sont encore en train de charger, vous pouvez également mocker un état de chargement dans les requêtes Apollo respctives :
+
+```js
+test('s\'affiche correctement lorsque allHeroes sont en train de charger', () => {
+  const wrapper = mount(App, {
+    mocks: {
+      $apollo: {
+        queries: {
+          allHeroes: {
+            loading: true,
+          },
+        },
+      },
+    },
+  })
+
+  expect(wrapper.element).toMatchSnapshot();
+})
+```
+
+## Tester avec un schéma GraphQL mocké
+
+Vous pouvez également faire des tests plus complexes et plus en profondeur grâce à [un schéma GraphQL mocké](https://www.apollographql.com/docs/graphql-tools/mocking.html). Cette méthode n'inclut pas Apollo, mais vous laisse vérifier qu'une requête s'exécute correctement avec un schéma donné.
+
+Pour cela, vous avez d'abord besoin d'un schéma :
+
+```js
+const sourceSchema = `
+  type VueHero {
+    id: ID!
+    name: String!
+    image: String
+    github: String
+    twitter: String
+  }
+
+  input HeroInput {
+    name: String!
+    image: String
+    github: String
+    twitter: String
+  }
+
+
+  type Query {
+    allHeroes: [VueHero]
+  }
+
+  type Mutation {
+    addHero(hero: HeroInput!): VueHero!
+    deleteHero(name: String!): Boolean
+  }
+`
+```
+
+Ensuite, il vous faut créer un schéma exécutable avec la méthode `graphql-tools` :
+
+```js
+import { makeExecutableSchema } from 'graphql-tools'
+
+// ...
+
+const schema = makeExecutableSchema({
+  typeDefs: sourceSchema,
+})
+```
+
+Puis vous devez ajouter les fonctions mockées au schéma :
+
+```js
+import { addMockFunctionsToSchema } from 'graphql-tools'
+
+// ...
+
+addMockFunctionsToSchema({
+  schema,
+})
+```
+
+Spcéfiez la requête GraphQL :
+
+```js
+const query = `
+  query {
+    allHeroes {
+      id
+      name
+      twitter
+      github
+      image
+    }
+  }
+`
+```
+
+Appelez la requête GraphQL dans le test, passez la réponse comme donnée au composant, puis vérifiez que le rendu du composant correspond au snapshot :
+
+```js
+graphql(schema, query).then(result => {
+  wrapper.setData(result.data)
+  expect(wrapper.element).toMatchSnapshot()
+})
+```
+
+Dans ce cas, tous les champs de types `string` seront égales à "Hello World" et tous ceux de type `number` seront négatifs. Si vous souhaitez une réponse plus réaliste, vous devez spécifier les résolveurs pour chaque requête :
+
+```js
+const resolvers = {
+  Query: {
+    allHeroes: () => [
+      {
+        id: '-pBE1JAyz',
+        name: 'Evan You',
+        image:
+          'https://pbs.twimg.com/profile_images/888432310504370176/mhoGA4uj_400x400.jpg',
+        twitter: 'youyuxi',
+        github: 'yyx990803',
+      },
+    ],
+  },
+}
+```
+
+Ensuite, vous devez ajouter des résolveurs à votre schéma exécutable et assigner la propriété `preserveResolvers` à `true` lorsque vous ajoutez les fonctions mockées :
+
+```js
+const schema = makeExecutableSchema({
+  typeDefs: sourceSchema,
+  resolvers,
+})
+
+addMockFunctionsToSchema({
+  schema,
+  preserveResolvers: true,
+})
+```
+
+Vous pouvez tester les mutations de la même façon.
+
+---
\ No newline at end of file

From 2d28c7d357c8a8fec8d20037d5bea9df1f527a53 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Wed, 5 Feb 2020 23:58:36 +0100
Subject: [PATCH 10/38] feat: translate ssr guide

---
 packages/docs/src/fr/guide/ssr.md | 323 ++++++++++++++++++++++++++++++
 1 file changed, 323 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/ssr.md

diff --git a/packages/docs/src/fr/guide/ssr.md b/packages/docs/src/fr/guide/ssr.md
new file mode 100644
index 00000000..4b3ea21c
--- /dev/null
+++ b/packages/docs/src/fr/guide/ssr.md
@@ -0,0 +1,323 @@
+# Rendu côté serveur (SSR)
+
+::: warning
+**Nécessite Vue 2.6+ avec `serverPrefetch`**
+:::
+
+## Plugin Vue CLI
+
+J'ai créé un plugin pour [vue-cli](http://cli.vuejs.org) afin que vous puissiez ajouter Apollo (ainsi qu'un serveur GraphQL optionnel!) en deux minutes ! ✨🚀
+
+Dans votre projet Vue CLI 3 :
+
+
+```bash
+vue add @akryum/ssr
+```
+
+[Plus d'informations](https://github.com/Akryum/vue-cli-plugin-ssr)
+
+## Récupération de component
+
+::: tip
+Suivez le [guide SSR officiel](https://ssr.vuejs.org) pour en savoir plus sur le rendu côté serveur avec Vue.
+:::
+
+Par défaut, avez `vue-server-renderer`, toutes les requêtes GraphQL de vos composant rendus côté serveur sont pré-récupérées automatiquement.
+
+::: tip
+Vous avec accès à `this` dans les options telles que `variables`, même côté serveur !
+:::
+
+Example :
+
+```js
+export default {
+  apollo: {
+    allPosts: {
+      query: gql`query AllPosts {
+        allPosts {
+          id
+          imageUrl
+          description
+        }
+      }`,
+    }
+  }
+}
+```
+
+Example 2 :
+
+```js
+export default {
+  apollo: {
+    post: {
+      query: gql`query Post($id: ID!) {
+        post (id: $id) {
+          id
+          imageUrl
+          description
+        }
+      }`,
+      variables () {
+        return {
+          id: this.id,
+        }
+      },
+    }
+  }
+}
+```
+
+## Sauter la pré-récupération de données
+
+Vous pouvez ne pas pré-récupérer de données côté serveur pour une requête spécifique en assignant l'option `prefetch` à `false`.
+
+Voici un exemple qui ne pré-récupère pas la requête :
+
+```js{12}
+export default {
+  apollo: {
+    allPosts: {
+      query: gql`query AllPosts {
+        allPosts {
+          id
+          imageUrl
+          description
+        }
+      }`,
+      // Pas de pré-récupération
+      prefetch: false,
+    }
+  }
+}
+```
+
+Si vous souhaitez ne pas pré-récupérer de données pour toutes les requêtes, vous pouvez utiliser l'option `$prefetch` option :
+
+```js{4}
+export default {
+  apollo: {
+    // Pas de pré-récupération
+    $prefetch: false,
+    allPosts: {
+      query: gql`query AllPosts {
+        allPosts {
+          id
+          imageUrl
+          description
+        }
+      }`,
+    }
+  }
+}
+```
+
+## Créer le client Apollo
+
+Il est recommandé de créer les clients Apollo dans une fonction prenant un argument `ssr`, assigné à `true` côté serveur et `false` côté client.
+
+Lorsque `ssr` est `false`, nous essayons de récupérer l'état du cache Apollo avec `cache.restore`, en récupérant la variable `window.__APOLLO_STATE__` qui est injectée dans le fichier HTML sur le serveur lors du rendu.
+
+Voici un exemple :
+
+```js{21-30}
+// apollo.js
+
+import Vue from 'vue'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import VueApollo from 'vue-apollo'
+
+// Installation du plugin Vue
+Vue.use(VueApollo)
+
+// Création du client Apollo
+export function createApolloClient (ssr = false) {
+  const httpLink = new HttpLink({
+  // Vous devez utiliser un URL absolu
+    uri: ENDPOINT + '/graphql',
+  })
+
+  const cache = new InMemoryCache()
+
+  // Côté client, on récupère l'état injecté
+  if (!ssr) {
+    if (typeof window !== 'undefined') {
+      const state = window.__APOLLO_STATE__
+      if (state) {
+        // Si vous utilisez plusieurs clients, utilisez `state.<client_id>`
+        cache.restore(state.defaultClient)
+      }
+    }
+  }
+
+  const apolloClient = new ApolloClient({
+    link: httpLink,
+    cache,
+    ...(ssr ? {
+      // On active cette option côté serveur pour optimiser les requêtes lors du SSR
+      ssrMode: true,
+    } : {
+      // Désactivation temporaire de la récupération forcée de requêtes
+      ssrForceFetchDelay: 100,
+    }),
+  })
+
+  return apolloClient
+}
+```
+
+## Création de l'application
+
+AU lieu de créer notre instance Vue racine tout de suite, nous utilisons une fonction `createApp` qui accepte un paramètre `context`.
+
+Cette fonction est utilisée côté client et côté serveur avec une valeur `ssr` différente dans le `context`. Nous utilisons cette valeur dans la méthode `createApolloClient` que nous avons écrite plus tôt.
+
+Voici un exemple d'une fonction `createApp` classique :
+
+```js{9,37}
+// app.js
+
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+import { sync } from 'vuex-router-sync'
+
+import VueApollo from 'vue-apollo'
+import { createApolloClient } from './apollo'
+
+import App from './ui/App.vue'
+import routes from './routes'
+import storeOptions from './store'
+
+Vue.use(VueRouter)
+Vue.use(Vuex)
+
+function createApp (context) {
+  const router = new VueRouter({
+    mode: 'history',
+    routes,
+  })
+
+  const store = new Vuex.Store(storeOptions)
+
+  // On synchronise  le router avec le store Vuex
+  // Cela enregistre `store.state.route`
+  sync(store, router)
+
+  // Restauration de l'état Vuex
+  if (!context.ssr && window.__INITIAL_STATE__) {
+    // On initialise l'état du store avec la donnée injectée depuis le serveur
+    store.replaceState(window.__INITIAL_STATE__)
+  }
+
+  // Apollo
+  const apolloClient = createApolloClient(context.ssr)
+  const apolloProvider = new VueApollo({
+    defaultClient: apolloClient,
+  })
+
+  return {
+    app: new Vue({
+      el: '#app',
+      router,
+      store,
+      apolloProvider,
+      ...App,
+    }),
+    router,
+    store,
+    apolloProvider,
+  }
+}
+
+export default createApp
+```
+
+## Côté client
+
+
+La partie client est simple -- on appelle `createApp` avec `ssr` passé à `false` :
+
+```js
+// client-entry.js
+
+import createApp from './app'
+
+createApp({
+  ssr: false,
+})
+```
+
+## Côté serveur
+
+Nous n'avons besoin de rien faire de particulier, à part de stocker le cache Apollo pour pouvoir l'injecter dans le HTML du client. Vous pouvez trouver plus d'informations sur [le routage côté serveur](https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router) et la [pré-récupération de données](https://ssr.vuejs.org/guide/data.html#data-store) dans le guide SSR officiel.
+
+Voici un exemple avec Vue Router et un store Vuex :
+
+```js{3,26}
+// server-entry.js
+
+import ApolloSSR from 'vue-apollo/ssr'
+import createApp from './app'
+
+export default () => new Promise((resolve, reject) => {
+  const { app, router, store, apolloProvider } = createApp({
+    ssr: true,
+  })
+
+  // Ajout de l'emplacement du routeur
+  router.push(context.url)
+
+  // On attend que le routeur ait résolu les possibles hooks asynchrones
+  router.onReady(() => {
+    // Ce hook `rendered` est appelé lorsque l'application est rendue
+    context.rendered = () => {
+      // Un fois l'application rendue, notre store est maintenant
+      // rempli avec l'état de nos composants.
+      // Lorsque nous attachons un état au contexte et que l'option `template`
+      // est utilisée comme moteur de rendu, l'état est automatiquement
+      // sérialisé et injecté dans le HTML dans `window.__INITIAL_STATE__`.
+      context.state = store.state
+
+      // On injecte également l'état du cache Apollo
+      context.apolloState = ApolloSSR.getStates(apolloProvider)
+    }
+    resolve(app)
+  })
+})
+```
+
+Vous pouvez utiliser la méthode [ApolloSSR.getStates](../api/ssr.md#getstates) pour récupérer le code JavaScript nécessaire à l'injection dans la page générée pour passer la donnée du cache Apollo au client.
+
+Dans le [template de page](https://ssr.vuejs.org/guide/#using-a-page-template), utilisez l'utilitaire `renderState` :
+
+```html
+{{{ renderState({ contextKey: 'apolloState', windowKey: '__APOLLO_STATE__' }) }}}
+```
+
+Voici un exemple complet :
+
+```html{15}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>{{ title }}</title>
+    {{{ renderResourceHints() }}}
+    {{{ renderStyles() }}}
+  </head>
+  <body>
+    <!--vue-ssr-outlet-->
+    {{{ renderState() }}}
+    {{{ renderState({ contextKey: 'apolloState', windowKey: '__APOLLO_STATE__' }) }}}
+    {{{ renderScripts() }}}
+  </body>
+</html>
+```

From c7e23236f22ecb248726d8733c6359fda8d28045 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 00:07:23 +0100
Subject: [PATCH 11/38] feat: translate component README

---
 .../docs/src/fr/guide/components/README.md    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/components/README.md

diff --git a/packages/docs/src/fr/guide/components/README.md b/packages/docs/src/fr/guide/components/README.md
new file mode 100644
index 00000000..32189782
--- /dev/null
+++ b/packages/docs/src/fr/guide/components/README.md
@@ -0,0 +1,29 @@
+# Qu'est-ce qu'un composant Apollo ?
+
+Ces composants sont comme les autres. Ils prennnt un document GraphQL en props et utilisent les [slots avec portée](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) pour passer les résultats.
+
+L'avantage est que vous pouvez utiliser ces composants directement dans le template au lieu d'utiliser l'option `apollo` de votre composant. Dans certains cas, vous n'avez même pas besoin d'ajouter de script du tout dans votre fichier `.vue` ! C'est encore plus déclaratif.
+
+Voici un rapide exemple d'une [ApolloQuery](./query.md) dans un template :
+
+```vue
+<template>
+  <!-- Apollo Query -->
+  <ApolloQuery :query="/* some query */">
+    <!-- Le résultat est rafraîchi automatiquement -->
+    <template slot-scope="{ result: { data, loading } }">
+      <!-- Du contenu -->
+      <div v-if="loading">Chargement...</div>
+      <ul v-else>
+        <li v-for="user of data.users" class="user">
+          {{ user.name }}
+        </li>
+      </ul>
+    </template>
+  </ApolloQuery>
+</template>
+
+<!-- Pas besoin de script -->
+```
+
+Jetez un œil à [ApolloQuery](./query.md) pour en savoir plus sur comment écrire des requêtes GraphQL dans le template.

From 26279e25c4ed3fd99a471c072843fdd5a7b3641d Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 00:14:05 +0100
Subject: [PATCH 12/38] feat: translate component subscribe to more guide

---
 .../fr/guide/components/subscribe-to-more.md  | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/components/subscribe-to-more.md

diff --git a/packages/docs/src/fr/guide/components/subscribe-to-more.md b/packages/docs/src/fr/guide/components/subscribe-to-more.md
new file mode 100644
index 00000000..465047e3
--- /dev/null
+++ b/packages/docs/src/fr/guide/components/subscribe-to-more.md
@@ -0,0 +1,100 @@
+# ApolloSubscribeToMore
+
+Vous pouvez souscrire à davantage de donnée avec le composant `ApolloSubscribeToMore` (ou `apollo-subscribe-to-more`). Vous pouvez en utiliser autant que vous voulez dans un composant `<ApolloQuery>`.
+
+::: tip
+Si la mise à jour est liée à un objet existant (par exemple, changer la valeur d'un champ), `updateQuery` n'est pas requis, puisque le client Apollo sera capable de mettre le cache à jour automatiquement.
+:::
+
+Voici un exemple :
+
+```vue
+<template>
+  <ApolloQuery :query="...">
+    <ApolloSubscribeToMore
+      :document="gql => gql`
+        subscription messageChanged ($channelId: ID!) {
+          messageAdded (channelId: $channelId) {
+            type
+            message {
+              id
+              text
+            }
+          }
+        }
+      `"
+      :variables="{ channelId }"
+      :updateQuery="onMessageAdded"
+    />
+
+    <!-- ... -->
+  </ApolloQuery>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      channel: 'general',
+    }
+  },
+
+  methods: {
+    onMessageAdded (previousResult, { subscriptionData }) {
+      // Le résultat précédent est immuable
+      const newResult = {
+        messages: [...previousResult.messages],
+      }
+      // Ajoute la question dans la liste
+      newResult.messages.push(subscriptionData.data.messageAdded)
+      return newResult
+    },
+  },
+}
+</script>
+```
+
+Consultez [ApolloQuery](./query.md) pour en savoir plus sur comment écrire des requêtes GraphQL dans le template.
+
+Consultez [la référence API](../../api/apollo-subscribe-to-more.md) pour connaître toutes les options disponibles.
+
+## Exemples avec `updateQuery`
+
+Ajouter un nouvel élément en cache :
+
+```js
+methods: {
+  onMessageAdded (previousResult, { subscriptionData }) {
+    // Le résultat précédent est immuable
+    const newResult = {
+      messages: [...previousResult.messages],
+    }
+    // Ajout la question dans la liste
+    newResult.messages.push(subscriptionData.data.messageAdded)
+    return newResult
+  }
+}
+```
+
+Retirer un élément du cache :
+
+```js
+methods: {
+  onMessageAdded (previousResult, { subscriptionData }) {
+    const removedMessage = subscriptionData.data.messageRemoved
+    const index = previousResult.messages.findIndex(
+      m => m.id === removedMessage.id
+    )
+
+    if (index === -1) return previousResult
+
+    // Le résultat précédent est immuable
+    const newResult = {
+      messages: [...previousResult.messages],
+    }
+    // Retire la question de la liste
+    newResult.messages.splice(index, 1)
+    return newResult
+  }
+}
+```

From c2963d485ee0e8bc2214fbcbb55938a21e74831b Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 00:25:04 +0100
Subject: [PATCH 13/38] feat: translate component mutation guide

---
 .../docs/src/fr/guide/components/mutation.md  | 210 ++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/components/mutation.md

diff --git a/packages/docs/src/fr/guide/components/mutation.md b/packages/docs/src/fr/guide/components/mutation.md
new file mode 100644
index 00000000..5babd8f6
--- /dev/null
+++ b/packages/docs/src/fr/guide/components/mutation.md
@@ -0,0 +1,210 @@
+# ApolloMutation
+
+Vous pouvez utiliser le composant `ApolloMutation` (ou `apollo-mutation`) pour invoquer des mutations Apollo directement dans vos templates.
+
+Voici un exemple :
+
+```vue
+<ApolloMutation
+  :mutation="gql => gql`
+    mutation DoStuff ($name: String!) {
+      someWork (name: $name) {
+        success
+        timeSpent
+      }
+    }
+  `"
+  :variables="{
+    name
+  }"
+  @done="onDone"
+>
+  <template v-slot="{ mutate, loading, error }">
+    <button :disabled="loading" @click="mutate()">Cliquez ici</button>
+    <p v-if="error">Une erreur s'est produite: {{ error }}</p>
+  </template>
+</ApolloMutation>
+```
+
+Consultez [ApolloQuery](./query.md) pour en savoir plus sur comment écrire des requêtes GraphQL dans le template.
+
+Consultez [la référence API](../../api/apollo-subscribe-to-more.md) pour connaître toutes les options disponibles.
+
+## Rafraîchir le cache
+
+Si la mutation ne met à jour que des objets qui existent déjà en cache (par exemple, qui change des champs existants), vous n'avez pas besoin de faire quoi que ce soit, Apollo Client rafraîchira le cache automatiquement. Cela fonctionnera uniquement si l'objet dans le résultat de la mutation contient les champs `__typename` et `id` (ou les champs personnalisés que vous utilisez pour [normaliser le cache](https://www.apollographql.com/docs/react/advanced/caching#normalization)).
+
+Sinon, vous devez dire à Apollo Client comment mettre le cache à jour avec le résultat de la mutation. Par exemple, si la mutation ajoute un nouvel élément, vous devez mettre à jour le résultat concerné pour pouvoir pousser ce nouvel élément dans la requête.
+
+### Ajouter un élément
+
+```vue
+<template>
+  <ApolloMutation
+    :mutation="gql => gql`
+      mutation ($input: SendMessageToThreadInput!) {
+        sendMessageToThread (input: $input) {
+          message {
+            ...message
+          }
+        }
+      }
+      ${$options.fragments.message}
+    `"
+    :variables="{
+      threadId,
+      text
+    }"
+    :update="updateCache"
+  >
+    <!-- Formulaire -->
+  </ApolloMutation>
+</template>
+
+<script>
+import gql from 'gql-tag'
+
+const fragments = {
+  message: gql`
+    fragment message on Message {
+      id
+      text
+      user {
+        id
+        name
+      }
+    }
+  `
+}
+
+export default {
+  fragments,
+
+  props: {
+    threadId: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    updateCache (store, { data: { sendMessageToThread } }) {
+      const query = {
+        query: gql`
+        query ($threadId: ID!) {
+          thread (id: $threadId) {
+            id
+            messages {
+              ...message
+            }
+          }
+        }
+        ${fragments.message}
+        `,
+        variables: {
+          threadId: this.threadId,
+        },
+      }
+      // Lecture de la requête depuis le cache
+      const data = store.readQuery(query)
+      // Mutation du résultat du cache
+      data.thread.messages.push(sendMessageToThread.message)
+      // Réécriture en cache
+      store.writeQuery({
+        ...query,
+        data,
+      })
+    },
+  }
+}
+</script>
+```
+
+### Retirer un élément
+
+```vue
+<template>
+  <ApolloMutation
+    :mutation="gql => gql`
+      mutation ($input: DeleteMessageFromThreadInput!) {
+        deleteMessageFromThread (input: $input) {
+          success
+        }
+      }
+    `"
+    :variables="{
+      threadId,
+      messageId
+    }"
+    :update="updateCache"
+  >
+    <!-- Formulaire -->
+  </ApolloMutation>
+</template>
+
+<script>
+import gql from 'gql-tag'
+
+const fragments = {
+  message: gql`
+    fragment message on Message {
+      id
+      text
+      user {
+        id
+        name
+      }
+    }
+  `
+}
+
+export default {
+  fragments,
+
+  props: {
+    threadId: {
+      type: String,
+      required: true
+    },
+    messageId: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    updateCache (store, { data: { deleteMessageFromThread } }) {
+      const query = {
+        query: gql`
+        query ($threadId: ID!) {
+          thread (id: $threadId) {
+            id
+            messages {
+              ...message
+            }
+          }
+        }
+        ${fragments.message}
+        `,
+        variables: {
+          threadId: this.threadId,
+        },
+      }
+      // Lecture de la requête depuis le cache
+      const data = store.readQuery(query)
+      // Recherche de l'élément supprimé
+      const index = data.thread.messages.findIndex(m => m.id === this.messageId)
+      if (index !== -1) {
+        // Mutation du résultat du cache
+        data.thread.messages.splice(index, 1)
+        // Réécriture en cache
+        store.writeQuery({
+          ...query,
+          data,
+        })
+      }
+    },
+  }
+}
+</script>
+```

From 4ea75d4bdce609377494d59b46ec12b69191d1f7 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:23:57 +0100
Subject: [PATCH 14/38] feat: translate component query guide

---
 .../docs/src/fr/guide/components/query.md     | 427 ++++++++++++++++++
 1 file changed, 427 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/components/query.md

diff --git a/packages/docs/src/fr/guide/components/query.md b/packages/docs/src/fr/guide/components/query.md
new file mode 100644
index 00000000..653b5a06
--- /dev/null
+++ b/packages/docs/src/fr/guide/components/query.md
@@ -0,0 +1,427 @@
+# ApolloQuery
+
+Vous pouvez utiliser le composant `ApolloQuery` (ou `apollo-query`) pour avoir des requêtes Apollo observées directement dans vos templates.
+Après avoir lu cette page, consultez [la référence API](../../api/apollo-query.md) pour connaître toutes les options disponibles.
+
+## Le gabarit étiqueté `gql`
+
+C'est la méthode recommandée pour utiliser le composant `ApolloQuery`. Il utilise la même syntaxe avec le gabarit étiqueté `gql` que dans les autres exemples :
+
+```vue
+<template>
+  <ApolloQuery
+    :query="gql => gql`
+      query MyHelloQuery ($name: String!) {
+        hello (name: $name)
+      }
+    `"
+    :variables="{ name }"
+  >
+    <!-- TODO -->
+  </ApolloQuery>
+</template>
+```
+
+Nous passons une fonction à la prop `query` qui prent le gabarit `gql` en argument, afin de pouvoir le document GraphQL directement.
+
+L'exemple ci-dessus passe également `variables` à la requête en utilisant la prop du même nom.
+
+Dans le slot par défaut d'`ApolloQuery`, vous pouvez accéder à de la donnée concernant la requête observée, comme par exemple l'object `result` :
+
+```vue
+<template v-slot="{ result: { loading, error, data } }">
+  <!-- Chargement -->
+  <div v-if="loading" class="loading apollo">Chargement...</div>
+
+  <!-- Erreur -->
+  <div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
+
+  <!-- Résultat -->
+  <div v-else-if="data" class="result apollo">{{ data.hello }}</div>
+
+  <!-- Pas de résultat -->
+  <div v-else class="no-result apollo">Pas de résultat :(</div>
+</template>
+```
+
+Voici un exemple complet :
+
+```vue
+<script>
+export default {
+  data () {
+    return {
+      name: 'Anne'
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <input v-model="name" placeholder="Renseignez votre nom">
+
+    <ApolloQuery
+      :query="gql => gql`
+        query MyHelloQuery ($name: String!) {
+          hello (name: $name)
+        }
+      `"
+      :variables="{ name }"
+    >
+      <template v-slot="{ result: { loading, error, data } }">
+        <!-- Chargement -->
+        <div v-if="loading" class="loading apollo">Chargement...</div>
+
+        <!-- Erreur -->
+        <div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
+
+        <!-- Résultat -->
+        <div v-else-if="data" class="result apollo">{{ data.hello }}</div>
+
+        <!-- Pas de résultat -->
+        <div v-else class="no-result apollo">No result :(</div>
+      </template>
+    </ApolloQuery>
+  </div>
+</template>
+```
+
+### Mise en place du gabarit étiqueté
+
+Si vous n'utilisez pas [vue-cli-plugin-apollo](https://github.com/Akryum/vue-cli-plugin-apollo) (`v0.20.0+`), vous devez configurer [vue-loader](https://vue-loader.vuejs.org) pour transpiler le gabarit étiqueté. `vue-loader` utilise [Bublé](https://buble.surge.sh/guide/) sous le capot pour transpiler le code dans les templates des composants. Nous devons ajouter la transformation `dangerousTaggedTemplateString` à Bublé pour que `gql` fonctionne. Par exemple, avec Vue CLI :
+
+```js
+// vue.config.js
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+        .loader('vue-loader')
+        .tap(options => {
+          options.transpileOptions = {
+            transforms: {
+              dangerousTaggedTemplateString: true,
+            },
+          }
+          return options
+        })
+  }
+}
+```
+
+Dans une configuration Webpack de base, ça ressemblerait à ça :
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              transpileOptions: {
+                transforms: {
+                  dangerousTaggedTemplateString: true
+                }
+              }
+            }
+          }
+        ]
+      },
+
+      /* D'autres règles... */
+    ]
+  }
+}
+```
+
+## Requêter avec des fichiers `gql`
+
+Une façon alternative d'utiliser le composant est de créer des fichirs `.gql` séparés. Ces fichiers doivent être pré-trasnformés avec [graphql-tag](https://github.com/apollographql/graphql-tag#webpack-preprocessing-with-graphql-tagloader).
+
+```vue
+<template>
+  <ApolloQuery
+    :query="require('../graphql/HelloWorld.gql')"
+    :variables="{ name }"
+  >
+    <template v-slot="{ result: { loading, error, data } }">
+      <!-- Chargement -->
+      <div v-if="loading" class="loading apollo">Chargement...</div>
+
+      <!-- Erreur -->
+      <div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
+
+      <!-- Résultat -->
+      <div v-else-if="data" class="result apollo">{{ data.hello }}</div>
+
+      <!-- Pas de résultat -->
+      <div v-else class="no-result apollo">Pas de résultat :(</div>
+    </template>
+  </ApolloQuery>
+</template>
+```
+
+## Opérations de requête
+
+Vous pouvez accéder à l'object de requête intelligent avec le prop de slot `query`. Voici un composant d'exemple qui pagine des données en utilisant `fetchMore` :
+
+```vue
+<template>
+  <ApolloQuery
+    :query="/* requête */"
+    :variables="{
+      limit: $options.pageSize
+    }"
+    v-slot="{ result: { loading, error, data }, query }"
+  >
+    <!-- Affichage des données -->
+    <button v-if="hasMore" @click="loadMore(query)">Charger plus</button>
+  </ApolloQuery>
+</template>
+
+<script>
+export default {
+  pageSize: 10,
+
+  data: {
+    return {
+      page: 1,
+      hasMore: true
+    }
+  },
+
+  methods: {
+    async loadMore (query) {
+      await query.fetchMore({
+        variables: {
+          offset: this.page++ * this.$options.pageSize
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult || fetchMoreResult.product.length === 0) {
+            this.hasMore = false
+            return prev
+          }
+          return Object.assign({}, prev, {
+            product: [...prev.product, ...fetchMoreResult.product]
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+Consultez [la référence API](../../api/smart-query.md#methods) pour connaître toutes les méthodes de requête intelligentes.
+
+## Utiliser des fragments
+
+Les fragments sont intéressants pour partager des morceaux de documents GraphQL dans d'autres documents pour récupérer la même donnée de façon uniforme, et éviter de dupliquer du code.
+
+Imaginons que nous avons une requête `GetMessages` avec un champ `messages` qui est un tableau d'objets `Message` :
+
+```graphql
+query GetMessages {
+  messages {
+    id
+    user {
+      id
+      name
+    }
+    text
+    created
+  }
+}
+```
+
+Nous voulons extraire tous les champs de `messages` qui ont le type `Message` dans un fragment, pour pouvoir les réutiliser ailleurs.
+
+D'abord, importez le gabarit `gql` dans le composant :
+
+```js
+import gql from 'graphql-tag'
+```
+
+Puis, dans la définition du composant, déclarez un nouvel objet `fragments` :
+
+```js
+export default {
+  fragments: {
+    /** TODO */
+  }
+}
+```
+
+Voici à quoi le fragment `message`, qui est appliqué au type `Message`, ressemble :
+
+```graphql
+fragment message on Message {
+  id
+  user {
+    id
+    name
+  }
+  text
+  created
+}
+```
+
+Nous pouvons utiliser le gabarit `gql` comme avec les requêtes :
+
+```js
+export default {
+  fragments: {
+    message: gql`
+      fragment message on Message {
+        id
+        user {
+          id
+          name
+        }
+        text
+        created
+      }
+    `
+  }
+}
+```
+
+Dans notre composant, nous pouvons maintenant accéder au fragment grâce à `this.$options.fragments.message`. Pour utiliser ce fragmnt dans notre requête `GetMessages`, nous devons utiliser la syntaxe de décomposition de GraphQL (`...`), ainsi que d'ajouter le fragment avec la requête :
+
+```js
+gql`
+  query GetMessages {
+    messages {
+      ...message
+    }
+  }
+  ${$options.fragments.message}
+`
+```
+
+Cela produira le document GraphQL (que vous pouvez essayer dans l'environnement de test de GraphQL de votre API) :
+
+```graphql
+query GetMessages {
+  messages {
+    ...message
+  }
+}
+fragment message on Message {
+  id
+  user {
+    id
+    name
+  }
+  text
+  created
+}
+```
+
+Que se passe-t-il ici ? GraphQL trouve l'opérateur `...` où l'on sélectionne des champs dans le champ `messages` à l'intérieur de notre requête. L'opérateur `...` est suivi par le nom du fragment, `message`, qui est ensuite recherché dans tout le document GraphQL. Nous avons correctement défini le fragment, que nous trouvons juste après la requête. Enfin, GraphQL copie tout le contenu du fragment et remplace `...message` avec.
+
+On obtient la requête finale :
+
+```graphql
+query GetMessages {
+  messages {
+    id
+    user {
+      id
+      name
+    }
+    text
+    created
+  }
+}
+fragment message on Message {
+  id
+  user {
+    id
+    name
+  }
+  text
+  created
+}
+```
+
+Voici le composant d'exemple complet :
+
+```vue
+<!-- MessageList.vue -->
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  fragments: {
+    message: gql`
+      fragment message on Message {
+        id
+        user {
+          id
+          name
+        }
+        text
+        created
+      }
+    `
+  }
+}
+</script>
+
+<template>
+  <ApolloQuery
+    :query="gql => gql`
+      query GetMessages {
+        messages {
+          ...message
+        }
+      }
+      ${$options.fragments.message}
+    `"
+  >
+    <!-- Contenu... -->
+  </ApolloQuery>
+</template>
+```
+
+### Réutiliser le fragment
+
+Nous pouvons désormais récupérer le fragment `message` dans d'autres composants :
+
+```vue
+<!-- MessageForm.vue -->
+<script>
+import gql from 'graphql-tag'
+import MessageList from './MessageList.vue'
+
+export default {
+  methods: {
+    async sendMessage () {
+      await this.$apollo.mutate({
+        mutation: gql`
+          mutation SendMessage ($input: SendMessageInput!) {
+            addMessage (input: $input) {
+              newMessage {
+                ...message
+              }
+            }
+          }
+          ${MessageList.fragments.message}
+        `,
+        variables: {
+          /* Variables */
+        },
+        /* Autres options */
+      })
+    }
+  }
+}
+</script>
+```

From 138437b6d5620c142c73ceb748e5a4af863d552a Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:24:31 +0100
Subject: [PATCH 15/38] fix: consistency

---
 packages/docs/src/fr/guide/components/README.md | 2 +-
 packages/docs/src/fr/guide/installation.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/fr/guide/components/README.md b/packages/docs/src/fr/guide/components/README.md
index 32189782..3f128a6c 100644
--- a/packages/docs/src/fr/guide/components/README.md
+++ b/packages/docs/src/fr/guide/components/README.md
@@ -26,4 +26,4 @@ Voici un rapide exemple d'une [ApolloQuery](./query.md) dans un template :
 <!-- Pas besoin de script -->
 ```
 
-Jetez un œil à [ApolloQuery](./query.md) pour en savoir plus sur comment écrire des requêtes GraphQL dans le template.
+Consultez [ApolloQuery](./query.md) pour en savoir plus sur comment écrire des requêtes GraphQL dans le template.
diff --git a/packages/docs/src/fr/guide/installation.md b/packages/docs/src/fr/guide/installation.md
index b0fc68d7..1073f972 100644
--- a/packages/docs/src/fr/guide/installation.md
+++ b/packages/docs/src/fr/guide/installation.md
@@ -1,6 +1,6 @@
 # Installation
 
-## Vue CLI Plugin
+## Plugin Vue CLI
 
 J'ai créé un plugin pour [vue-cli](http://cli.vuejs.org) afin que vous puissiez ajouter Apollo (ainsi qu'un serveur GraphQL optionnel!) en deux minutes ! ✨🚀
 

From aeaf11704731acbaf9529a2b71cf187e8c314e00 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:38:25 +0100
Subject: [PATCH 16/38] feat: translate apollo README

---
 packages/docs/src/fr/guide/apollo/README.md | 97 +++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/README.md

diff --git a/packages/docs/src/fr/guide/apollo/README.md b/packages/docs/src/fr/guide/apollo/README.md
new file mode 100644
index 00000000..a79419a3
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/README.md
@@ -0,0 +1,97 @@
+# Utilisation dans des composants Vue
+
+Après avoir installé `vue-apollo` dans votre application, tous vos composants peuvent utiliser Apollo via l'option spéciale `apollo`.
+
+## Options `apollo`
+
+Pour déclarer des requêtes Apollo dans vos composants Vue, ajouter l'objet `apollo` dans les options du composant :
+
+```js
+new Vue({
+  apollo: {
+    // Options spécifiques Apollo
+  },
+})
+```
+
+Dans un fichier `.vue` :
+
+```vue
+<template>
+  <div>Mon composant</div>
+</template>
+
+<script>
+export default {
+  apollo: {
+    // Options Vue Apollo
+  }
+}
+</script>
+```
+
+## `$apollo`
+
+Tous les composants enfant d'un composant possédant l'option `apolloProvider` ont un utilitaire `$apollo` de disponible. C'est le lien entre le composant et Apollo, il gère toute la complexité à votre place (y compris les mises à jours et le nettoyage).
+
+Vous pouvez accéder aux instances [apollo-client](https://www.apollographql.com/docs/react/) avec `this.$apollo.provider.defaultClient` ou bien `this.$apollo.provider.clients.<key>` (pour [les clients multiple](../multiple-clients.md)) dans tous vos composants Vue.
+
+Si vous êtes curieux, consultez [l'API d'$apollo](../../api/dollar-apollo.md).
+
+## Requêtes
+
+Dans l'objet `apollo`, ajoutez un attribut pour chaque propriété à laquelle vous voulez fournir le résultat d'une requête Apollo.
+
+```vue
+<template>
+  <div>{{ hello }}</div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  apollo: {
+    // Une requête simple qui rafraîchit la propriété Vue 'hello'
+    hello: gql`query {
+      hello
+    }`,
+  },
+}
+</script>
+```
+
+Pour en savoir plus, consultez la [section Requêtes](./queries.md).
+
+## Mutations
+
+Utilisez `this.$apollo.mutate` pour envoyer des mutations :
+
+```js
+methods: {
+  async addTag() {
+    // Appel à la mutation GraphQL
+    const result = await this.$apollo.mutate({
+      // Requête
+      mutation: gql`mutation ($label: String!) {
+        addTag(label: $label) {
+          id
+          label
+        }
+      }`,
+      // Paramètres
+      variables: {
+        label: this.newTag,
+      },
+    })
+  }
+}
+```
+
+Pour en savoir plus, consultez la [section Mutations](./mutations.md).
+
+## Options spéciales
+
+Les options spéciales commencent par un `$` dans l'objet `apollo`.
+
+Pour en savoir plus, consultez la [section Options spéciales](./special-options.md).

From ee1fe8c3d48442a4c13cf1aff55101e8f486bfb2 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:42:56 +0100
Subject: [PATCH 17/38] fix: close broken link

---
 packages/docs/src/fr/migration/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/fr/migration/README.md b/packages/docs/src/fr/migration/README.md
index 72e78404..e9abb45a 100644
--- a/packages/docs/src/fr/migration/README.md
+++ b/packages/docs/src/fr/migration/README.md
@@ -193,4 +193,4 @@ import { WebSocketLink } from 'apollo-link-ws'
 import { getMainDefinition } from 'apollo-utilities'
 ```
 
-Pour plus d'informations, visitez la [documentation Apollo officielle]https://www.apollographql.com/docs/react/v2.5/recipes/2.0-migration.
\ No newline at end of file
+Pour plus d'informations, visitez la [documentation Apollo officielle]https://www.apollographql.com/docs/react/v2.5/recipes/2.0-migration].
\ No newline at end of file

From e5d686b011e7acda819bce415ef30d4a9e3d96b2 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:43:13 +0100
Subject: [PATCH 18/38] fix: close broken link

---
 packages/docs/src/fr/migration/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/fr/migration/README.md b/packages/docs/src/fr/migration/README.md
index e9abb45a..8ebc2bc4 100644
--- a/packages/docs/src/fr/migration/README.md
+++ b/packages/docs/src/fr/migration/README.md
@@ -193,4 +193,4 @@ import { WebSocketLink } from 'apollo-link-ws'
 import { getMainDefinition } from 'apollo-utilities'
 ```
 
-Pour plus d'informations, visitez la [documentation Apollo officielle]https://www.apollographql.com/docs/react/v2.5/recipes/2.0-migration].
\ No newline at end of file
+Pour plus d'informations, visitez la [documentation Apollo officielle](https://www.apollographql.com/docs/react/v2.5/recipes/2.0-migration).
\ No newline at end of file

From 60968b920f1ba51198ca3cbd2c8d307200bdd13d Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:52:12 +0100
Subject: [PATCH 19/38] fix: fix missing translation

---
 packages/docs/src/fr/guide/ssr.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/fr/guide/ssr.md b/packages/docs/src/fr/guide/ssr.md
index 4b3ea21c..e4bea960 100644
--- a/packages/docs/src/fr/guide/ssr.md
+++ b/packages/docs/src/fr/guide/ssr.md
@@ -29,7 +29,7 @@ Par défaut, avez `vue-server-renderer`, toutes les requêtes GraphQL de vos com
 Vous avec accès à `this` dans les options telles que `variables`, même côté serveur !
 :::
 
-Example :
+Exemple :
 
 ```js
 export default {
@@ -47,7 +47,7 @@ export default {
 }
 ```
 
-Example 2 :
+Exemple 2 :
 
 ```js
 export default {

From 4f8915a4fde71c099736d3f680f2f86b3e8e0499 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 01:52:39 +0100
Subject: [PATCH 20/38] fix: fix bad links

---
 packages/docs/src/.vuepress/config.js | 18 +++++++++++-------
 packages/docs/src/fr/README.md        |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index 76d14f5a..54e38752 100644
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -29,6 +29,10 @@ module.exports = {
           message: "New content is available.",
           buttonText: "Refresh"
         },
+        '/fr/': {
+          message: "Du nouveau contenu est disponible.",
+          buttonText: "Rafraîchir"
+        },
       },
     },
   },
@@ -229,21 +233,21 @@ module.exports = {
         },
       },
       '/fr/': {
-        selectText: 'Languages',
+        selectText: 'Languges',
         label: 'Français',
         lastUpdated: 'Dernière mise à jour',
         nav: [
           {
             text: 'Guide',
-            link: '/guide/',
+            link: '/fr/guide/',
           },
           {
             text: 'API',
-            link: '/api/',
+            link: '/fr/api/',
           },
           {
             text: 'Migration',
-            link: '/migration/',
+            link: '/fr/migration/',
           },
           {
             text: 'Plugin CLI',
@@ -256,7 +260,7 @@ module.exports = {
         ],
         sidebarDepth: 2,
         sidebar: {
-          '/guide/': [
+          '/fr/guide/': [
             '',
             'installation',
             {
@@ -292,7 +296,7 @@ module.exports = {
               ],
             },
           ],
-          '/api/': [
+          '/fr/api/': [
             {
               title: 'Vue Apollo',
               collapsable: false,
@@ -320,7 +324,7 @@ module.exports = {
               ],
             },
           ],
-          '/migration/': [''],
+          '/fr/migration/': [''],
         },
       },
     },
diff --git a/packages/docs/src/fr/README.md b/packages/docs/src/fr/README.md
index ec204163..5dc7169a 100644
--- a/packages/docs/src/fr/README.md
+++ b/packages/docs/src/fr/README.md
@@ -2,7 +2,7 @@
 home: true
 heroImage: /logo.png
 actionText: Commencer →
-actionLink: /guide/
+actionLink: /fr/guide/
 features:
 - title: Rafraîchissements automatiques
   details: Ne vous préoccupez pas de refraîchir l'interface utilisteur ou de refaire les requêtes !

From a50c0fdf42191644a38cd97b3f7d066cc02bf5e5 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 02:05:05 +0100
Subject: [PATCH 21/38] feat: translate apollo special options

---
 .../src/fr/guide/apollo/special-options.md    | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/special-options.md

diff --git a/packages/docs/src/fr/guide/apollo/special-options.md b/packages/docs/src/fr/guide/apollo/special-options.md
new file mode 100644
index 00000000..48322de2
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/special-options.md
@@ -0,0 +1,75 @@
+
+# Options spéciales
+
+Les options spéciales commencent par un `$` dans l'objet `apollo`.
+
+- `$skip` pour désactiver toutes les requêtes et souscriptions (voir ci-dessous)
+- `$skipAllQueries` pour désactiver toutes les requêtes (voir ci-dessous)
+- `$skipAllSubscriptions` pour désactiver toutes les souscriptions (voir ci-dessous)
+- `$deep` pour observer les propriétés ci-dessus avec `deep: true` quand une fonction est fournie
+- `$error` pour intercepter les erreurs dans un fonction de gestion par défaut (voir les options avancées d'`error` pour les requêtes intelligentes)
+- `$query` pour appliquer les options par défaut à toutes les requêtes d'un composant
+
+Exemple :
+
+```vue
+<script>
+export default {
+  data () {
+    return {
+      loading: 0,
+    }
+  },
+  apollo: {
+    $query: {
+      loadingKey: 'loading',
+    },
+    query1: { ... },
+    query2: { ... },
+  },
+}
+</script>
+```
+
+Vous pouvez définir un ensemble d'options par défaut dans le provider Apollo afin d'appliquer les définitions `apollo`. Par exemple :
+
+```js
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+  defaultOptions: {
+    // Les options Apollo appliquées à toutes les requêtes dans les composants
+    $query: {
+      loadingKey: 'loading',
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+})
+```
+
+## Tout sauter
+
+Vous pouvez désactiver toutes les requêtes d'un composant avec `skipAllQueries`, toutes les souscriptions avec `skipAllSubscriptions`, et les deux `skipAll`:
+
+```js
+this.$apollo.skipAllQueries = true
+this.$apollo.skipAllSubscriptions = true
+this.$apollo.skipAll = true
+```
+
+Vous pouvez aussi déclarer ces propriétés dans l'option `apollo` du composant. Ils peuvent prendre des booléens :
+
+```js
+apollo: {
+  $skipAll: true
+}
+```
+
+Ou bien des fonctions réactives :
+
+```js
+apollo: {
+  $skipAll () {
+    return this.foo === 42
+  }
+}
+```

From e4b49f4f0ea571bb67f0273db15174627f45d6aa Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 09:39:46 +0100
Subject: [PATCH 22/38] feat: translate apollo mutations

---
 .../docs/src/fr/guide/apollo/mutations.md     | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/mutations.md

diff --git a/packages/docs/src/fr/guide/apollo/mutations.md b/packages/docs/src/fr/guide/apollo/mutations.md
new file mode 100644
index 00000000..217948d9
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/mutations.md
@@ -0,0 +1,123 @@
+# Mutations
+
+Les mutations sont des requêtes qui changent l'état de vos données sur votre serveur Apollo.
+
+Pour envoyer une mutation GraphQL, il faut utiliser `this.$apollo.mutate()`.
+
+Il existe une [application d'exemple](https://github.com/Akryum/vue-apollo-todos) focalisée sur les mutations que vopus pouvez consulter.
+
+::: warning
+Il n'est pas recommandé d'envoyer les champs `__typename` dans les variables, il faut donc éviter d'envoyer les réponses Apollo directement.
+:::
+
+```js
+methods: {
+  addTag() {
+    // On sauvegarde l'entrée utilisateur en cas d'erreur
+    const newTag = this.newTag
+    // On la supprime tôt pour donner une sensation de réactivité à l'interface utilisateur
+    this.newTag = ''
+    // Appel à la mutation GraphQL
+    this.$apollo.mutate({
+      // Requête
+      mutation: gql`mutation ($label: String!) {
+        addTag(label: $label) {
+          id
+          label
+        }
+      }`,
+      // Paramètres
+      variables: {
+        label: newTag,
+      },
+      // Mise à jour du cache avec le résultat
+      // La requête sera mise à jour avec une réponse optimiste
+      // puis avec le résultat de la mutation
+      update: (store, { data: { addTag } }) => {
+        // Lecture de la donnée depuis le cache pour cette requête
+        const data = store.readQuery({ query: TAGS_QUERY })
+        // Ajout du libellé de la mutation en fin de tableau
+        data.tags.push(addTag)
+        // Réécriture en cache
+        store.writeQuery({ query: TAGS_QUERY, data })
+      },
+      // Interface utilisateur optimiste
+      // Utilisé comme "fausse" donnée dès qu'une requête est réalisée afin que
+      // l'interface réagisse rapidement, pour une meilleur expérience
+      optimisticResponse: {
+        __typename: 'Mutation',
+        addTag: {
+          __typename: 'Tag',
+          id: -1,
+          label: newTag,
+        },
+      },
+    }).then((data) => {
+      // Résultat
+      console.log(data)
+    }).catch((error) => {
+      // Erreur
+      console.error(error)
+      // On restaure l'entrée utilisateur initiale
+      this.newTag = newTag
+    })
+  },
+},
+```
+
+## Exemple côté serveur
+
+```js
+export const schema = `
+type Tag {
+  id: Int
+  label: String
+}
+
+type Query {
+  tags: [Tag]
+}
+
+type Mutation {
+  addTag(label: String!): Tag
+}
+
+schema {
+  query: Query
+  mutation: Mutation
+}
+`
+
+// Faux générateur de mots
+import faker from 'faker'
+
+// Générons quelques libellés
+var id = 0
+var tags = []
+for (let i = 0; i < 42; i++) {
+  addTag(faker.random.word())
+}
+
+function addTag (label) {
+  let t = {
+    id: id++,
+    label,
+  }
+  tags.push(t)
+  return t
+}
+
+export const resolvers = {
+  Query: {
+    tags (root, args, context) {
+      return tags
+    },
+  },
+  Mutation: {
+    addTag (root, { label }, context) {
+      console.log(`adding tag '${label}'`)
+      return addTag(label)
+    },
+  },
+}
+```

From 9f7461efb2b7bbf422dde9cac0299f1f0496175e Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 09:48:37 +0100
Subject: [PATCH 23/38] feat: translate apollo pagination

---
 .../docs/src/fr/guide/apollo/pagination.md    | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/pagination.md

diff --git a/packages/docs/src/fr/guide/apollo/pagination.md b/packages/docs/src/fr/guide/apollo/pagination.md
new file mode 100644
index 00000000..47ccb269
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/pagination.md
@@ -0,0 +1,95 @@
+# Pagination avec `fetchMore`
+
+*Voici un [exemple simple](https://github.com/Akryum/apollo-server-example/blob/master/schema.js#L21) côté serveur.*
+
+Parfois, il se peut que votre jeu de données soit tellement grand qu'il faille le charger petit à petit.
+
+Vous pouvez utiliser la méthode `fetchMore` sur une requête intelligente pour charger plus de données.
+
+::: warning
+N'oubliez pas d'inclure le `__typename` au nouveau résultat.
+
+Ne changez pas les variables retournées initialement lorsque vous utilisez `variables`, ou bien vous pourriez perdre de la donnée dans la liste.
+:::
+
+Exemple :
+
+```vue
+<template>
+  <div id="app">
+    <h2>Pagination</h2>
+    <div class="tag-list" v-if="tagsPage">
+      <div class="tag-list-item" v-for="tag in tagsPage.tags">
+        {{ tag.id }} - {{ tag.label }} - {{ tag.type }}
+      </div>
+      <div class="actions">
+        <button v-if="showMoreEnabled" @click="showMore">Voir plus</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+const pageSize = 10
+
+export default {
+  name: 'app',
+  data: () => ({
+    page: 0,
+    showMoreEnabled: true,
+  }),
+  apollo: {
+    // Pages
+    tagsPage: {
+      // Requête GraphQL
+      query: gql`query tagsPage ($page: Int!, $pageSize: Int!) {
+        tagsPage (page: $page, size: $pageSize) {
+          tags {
+            id
+            label
+            type
+          }
+          hasMore
+        }
+      }`,
+      // Variables initiales
+      variables: {
+        page: 0,
+        pageSize,
+      },
+    },
+  },
+  methods: {
+    showMore () {
+      this.page++
+      // Récupération de plus de données et transformation du résultat original
+      this.$apollo.queries.tagsPage.fetchMore({
+        // Nouvelles variables
+        variables: {
+          page: this.page,
+          pageSize,
+        },
+        // Transformation du résultat précédent avec de la nouvelle donnée
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const newTags = fetchMoreResult.tagsPage.tags
+          const hasMore = fetchMoreResult.tagsPage.hasMore
+
+          this.showMoreEnabled = hasMore
+
+          return {
+            tagsPage: {
+              __typename: previousResult.tagsPage.__typename,
+              // Union des tableaux de libellés
+              tags: [...previousResult.tagsPage.tags, ...newTags],
+              hasMore,
+            },
+          }
+        },
+      })
+    },
+  },
+}
+</script>
+```

From 548d9504bd5bec730640abde19de4dda98219614 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 10:37:37 +0100
Subject: [PATCH 24/38] feat: translate apollo subscriptions

---
 .../docs/src/fr/guide/apollo/subscriptions.md | 341 ++++++++++++++++++
 1 file changed, 341 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/subscriptions.md

diff --git a/packages/docs/src/fr/guide/apollo/subscriptions.md b/packages/docs/src/fr/guide/apollo/subscriptions.md
new file mode 100644
index 00000000..54eafd58
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/subscriptions.md
@@ -0,0 +1,341 @@
+# Souscriptions
+
+## Installation
+
+*Pour l'implémentation serveur, vous ppuvez jeter un œil à [cet exemple simple](https://github.com/Akryum/apollo-server-example).*
+
+Pour activer la souscription par websockets, vous devez configurer un peu plus de choses :
+
+```
+npm install --save apollo-link-ws apollo-utilities
+```
+
+```js
+import Vue from 'vue'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+// Nouveaux imports
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+
+import VueApollo from 'vue-apollo'
+
+const httpLink = new HttpLink({
+  // Vous devez utiliser un URL absolu
+  uri: 'http://localhost:3020/graphql',
+})
+
+// Création du lien de souscription websocket
+const wsLink = new WebSocketLink({
+  uri: 'ws://localhost:3000/subscriptions',
+  options: {
+    reconnect: true,
+  },
+})
+
+// Grâce à la possibilité de scinder les liens, vous pouvez envoyer de la donnée
+// à chaque lien, en fonction du type d'opération à envoyer
+const link = split(
+  // Scission en fonction du type d'opération
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+  },
+  wsLink,
+  httpLink
+)
+
+// Création du client Apollo
+const apolloClient = new ApolloClient({
+  link,
+  cache: new InMemoryCache(),
+  connectToDevTools: true,
+})
+
+// Installation du plugin Vue comme précédemment
+Vue.use(VueApollo)
+```
+
+## Souscriptions supplémentaires
+
+Si vous souhaitez mettre à jour une requête intelligente depuis une souscription, la meilleure façon est d'utiliser la méthode de requête intelligente `subscribeToMore`. Cela crée des [souscriptions intelligentes](../../api/smart-subscription.md) liées à votre requête intelligente. Ajoutez simplement `subscribeToMore` à votre requête intelligente :
+
+```js
+apollo: {
+  tags: {
+    query: TAGS_QUERY,
+    subscribeToMore: {
+      document: gql`subscription name($param: String!) {
+        itemAdded(param: $param) {
+          id
+          label
+        }
+      }`,
+      // Variables passées à la souscription
+      // Comme nous utilisons une fonction, elles sont réactives
+      variables () {
+        return {
+          param: this.param,
+        }
+      },
+      // Mutation du résultat précédent
+      updateQuery: (previousResult, { subscriptionData }) => {
+        // On retourne le nouveau résultat depuis le précédent,
+        // avec la nouvelle donnée
+      },
+    }
+  }
+}
+```
+
+::: tip
+Notez qu'il est possible de passer un tableau de souscriptions à `subscribeToMore` pour souscrire à plusieurs souscriptions dans une requête.
+:::
+
+### Utilisation alternative
+
+Vous pouvez accéder aux requêtes que vous avez définies dans l'option `apollo` avec `this.$apollo.queries.<name>`, ce qui ressemblerait à ceci :
+
+```js
+this.$apollo.queries.tags.subscribeToMore({
+  // Document GraphQL
+  document: gql`subscription name($param: String!) {
+    itemAdded(param: $param) {
+      id
+      label
+    }
+  }`,
+  // Variables passées à la souscription
+  variables: {
+    param: '42',
+  },
+  // Mutation du résultat précédent
+  updateQuery: (previousResult, { subscriptionData }) => {
+    // On retourne le nouveau résultat depuis le précédent
+    // avec la nouvelle donnée
+  },
+})
+```
+
+Si la requête concernée est arrêtée, la souscription est automatiquement détruite.
+
+Voici un exemple :
+
+```js
+// Souscription au document GraphQL
+const TAG_ADDED = gql`subscription tags($type: String!) {
+  tagAdded(type: $type) {
+    id
+    label
+    type
+  }
+}`
+
+// Libellés SubscribeToMore
+// Nous avons plusieurs types de libellés
+// avec une souscription 'channl' pour chaque
+this.$watch(() => this.type, (type, oldType) => {
+  if (type !== oldType || !this.tagsSub) {
+    // Nous devons nous désinscrire avant de souscrire à nouveau
+    if (this.tagsSub) {
+      this.tagsSub.unsubscribe()
+    }
+    // Souscription dans la requête
+    this.tagsSub = this.$apollo.queries.tags.subscribeToMore({
+      document: TAG_ADDED,
+      variables: {
+        type,
+      },
+      // Mutation du résultat précédent
+      updateQuery: (previousResult, { subscriptionData }) => {
+        // Si nous avons déjà ajouté le libellé, on ne fait rien
+        // Cela peut être causé par `updateQuery` dans notre mutation addTag
+        if (previousResult.tags.find(tag => tag.id === subscriptionData.data.tagAdded.id)) {
+          return previousResult
+        }
+
+        return {
+          tags: [
+            ...previousResult.tags,
+            // Ajout du nouveau libellé
+            subscriptionData.data.tagAdded,
+          ],
+        }
+      },
+    })
+  }
+}, {
+  immediate: true,
+})
+```
+
+## Abstraction simple
+
+::: danger
+Si vous souhaitez mettre à jour une requête avec le résultat d'une souscription, utilisez `subscribeToMore`.
+Les méthodes ci-dessous s'appliquent dans le cas d'une notification.
+:::
+
+Vous pouvez déclarer des [souscriptions intelligentes](../../api/smart-subscription.md) dans l'option `apollo` avec le mot-clé `$subscribe` :
+
+```js
+apollo: {
+  // Souscriptions
+  $subscribe: {
+    // Lorsqu'un libellé est ajouté
+    tagAdded: {
+      query: gql`subscription tags($type: String!) {
+        tagAdded(type: $type) {
+          id
+          label
+          type
+        }
+      }`,
+      // Variables réactives
+      variables () {
+        // Le fonctionnement est le même que pour des requêtes classiques
+        // et souscrit à nouveau avec les bonnes variables
+        // chaque fois qu'un valeur change
+        return {
+          type: this.type,
+        }
+      },
+      // Hook de résultat
+      // N'oubliez pas de décomposer `data`
+      result ({ data }) {
+        console.log(data.tagAdded)
+      },
+    },
+  },
+},
+```
+
+Vous pouvez accéder à la souscription avec `this.$apollo.subscriptions.<name>`.
+
+:::tip
+Comme pour les requêtes, vous pouvez déclarer la souscription [avec une fonction](./queries.md#option-function), et vous pouvez déclarer l'option `query` [avec une fonction réactive](./queries.md#reactive-query-definition).
+:::
+
+Lorsqu'un serveur supporte les requêtes en temps réel et utilise les souscriptions pour les mettre à jour, comme [Hasura](https://hasura.io/), vous pouvez utiliser de simples souscriptions pour les requêtes réactives :
+
+```js
+data () {
+  return {
+    tags: [],
+  };
+},
+apollo: {
+  $subscribe: {
+    tags: {
+      query: gql`subscription {
+        tags {
+          id
+          label
+          type
+        }
+      }`,
+      result ({ data }) {
+        this.tags = data.tags;
+      },
+    },
+  },
+},
+```
+
+## Sauter la souscription
+
+Si la souscription est sautée, elle est désactivée et ne sera plus mise à jour. Vous pouvez utiliser l'options `skip` :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Souscriptions
+  $subscribe: {
+    // Lorsqu'un libellé est ajouté
+    tags: {
+      query: gql`subscription tags($type: String!) {
+        tagAdded(type: $type) {
+          id
+          label
+          type
+        }
+      }`,
+      // Variables réactives
+      variables () {
+        return {
+          type: this.type,
+        }
+      },
+      // Hook de résultat
+      result (data) {
+        // Mise à jour de l'état local
+        this.tags.push(data.tagAdded)
+      },
+      // On saute la souscription
+      // Skip the subscription
+      skip () {
+        return this.skipSubscription
+      }
+    },
+  },
+},
+```
+
+Ici, `skip` est appelé automatiquement dès que la propriété `skipSubscription` du composant change.
+
+Vous pouvez aussi accéder à la souscription directemnt et assigner la propriété `skip` :
+
+```js
+this.$apollo.subscriptions.tags.skip = true
+```
+
+## Ajouter des souscription intelligentes manuellement
+
+Vous pouvez ajouter manellement une souscription intelligente avec la méthode `$apollo.addSmartSubscription(key, options)` :
+
+```js
+created () {
+  this.$apollo.addSmartSubscription('tagAdded', {
+    // Mêmes options que pour '$subscribe' ci-dessus
+  })
+}
+```
+
+:::tip
+En interne, cette méthode est appelée pour chaque entrée de l'objet `$subscribe` dans l'option `apollo` du composant.
+:::
+
+## Souscription Apollo standard
+
+Utilisez la méthode `$apollo.subscribe()` pour souscrire à une souscription GraphQL qui sera automatiquement détruite lors que le composant le sera également. Cela ne crée **pas** de souscription intelligente.
+
+```js
+mounted () {
+  const subQuery = gql`subscription tags($type: String!) {
+    tagAdded(type: $type) {
+      id
+      label
+      type
+    }
+  }`
+
+  const observer = this.$apollo.subscribe({
+    query: subQuery,
+    variables: {
+      type: 'City',
+    },
+  })
+
+  observer.subscribe({
+    next (data) {
+      console.log(data)
+    },
+    error (error) {
+      console.error(error)
+    },
+  })
+},
+```

From d28b49b7f602b127dbeeb45aec378d729471fcdf Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:24:09 +0100
Subject: [PATCH 25/38] feat: translate apollo queries

---
 packages/docs/src/fr/guide/apollo/queries.md | 449 +++++++++++++++++++
 1 file changed, 449 insertions(+)
 create mode 100644 packages/docs/src/fr/guide/apollo/queries.md

diff --git a/packages/docs/src/fr/guide/apollo/queries.md b/packages/docs/src/fr/guide/apollo/queries.md
new file mode 100644
index 00000000..6b26caa5
--- /dev/null
+++ b/packages/docs/src/fr/guide/apollo/queries.md
@@ -0,0 +1,449 @@
+# Requêtes
+
+Dans GraphQL, une requête est un appel à une API pour récupérer de la donnée. C'est représenté par un *document GraphQL* comme ceci :
+
+```graphql
+query myHelloQueryName {
+  hello
+}
+```
+
+Dans l'objet `apollo`, ajoutez un attribut pour chaque propriété à laquelle vous voulez fournir le résultat d'une requête Apollo. Chacune deviendra une requête intelligente.
+
+## Requête simple
+
+Vous pouvez utiliser `gql` pour écrire vos requêtes GraphQL :
+
+```js
+import gql from 'graphql-tag'
+```
+
+Ajoutez la requête [gql](https://github.com/apollographql/graphql-tag) directement en valeur :
+
+```js
+apollo: {
+  // Une requête simple qui rafraîchit la propriété Vue 'hello'
+  hello: gql`{hello}`,
+},
+```
+
+Vous pouvez accéder à la requêtes avec `this.$apollo.queries.<name>`.
+
+Vous pouvez initialiser la propriété dans le hook `data` de votre composant Vue :
+
+```js
+data () {
+  return {
+    // Intialiser votre donnée Apollo
+    hello: '',
+  },
+},
+```
+
+Côté serveur, ajoutez le schéma et le résolveur correspondants :
+
+```js
+export const schema = `
+type Query {
+  hello: String
+}
+
+schema {
+  query: Query
+}
+`
+
+export const resolvers = {
+  Query: {
+    hello (root, args, context) {
+      return 'Hello world!'
+    },
+  },
+}
+```
+
+Pour plusz d'informations, consultez la [documentation d'Apollo](https://www.apollographql.com/docs/apollo-server/).
+
+Vous pouvez utiliser votre propriété comme d'habitude dans votre composant Vue :
+
+```vue
+<template>
+  <div class="apollo">
+    <h3>Hello</h3>
+    <p>
+      {{hello}}
+    </p>
+  </div>
+</template>
+```
+
+## Correspondance de noms
+
+Notez qu'une erreur de débutant claqque est d'utiliser un nom de donnée différent du champ dans la requête, par exemple :
+
+```js
+apollo: {
+  world: gql`query {
+    hello
+  }`
+}
+```
+
+Vous remarquez que `world` est différent de `hello`. Vue Apollo ne peut pas deviner quelle donnée vous souhaitez utiliser dans votre composant depuis le résultat de la requête. Par défaut, il essaiera simplemnt le nom que vous utilisez pour la donnée dans le composant (la clé dans l'objet `apollo`), dans notre cas, `world`. Si les noms ne correspondent pas, vous ppuvez utiliser l'option `update` pour dire à Vue Apollo quelle donnée utiliser dans le résultat :
+
+```js
+apollo: {
+  world: {
+    query: gql`query {
+      hello
+    }`,
+    update: data => data.hello
+  }
+}
+```
+
+Vous pouvez également renommer le champ directement dans le document GraphQL :
+
+```js
+apollo: {
+  world: gql`query {
+    world: hello
+  }`
+}
+```
+
+Dans cet exemple, nous renommons le champ `hello` en `world`, pour que Vue Apollo puisse automatiquement inférer ce qu'il doit récupérer depuis le résultat.
+
+## Requête avec des paramètres
+
+Vous pouvez ajouter des variables (et d'autres paramètres) à votre requête `gql` en déclarant `query` et `variables` dans l'objet au lieu de la requête GraphQL :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Requête avec des paramètres
+  ping: {
+    // Requête gql
+    query: gql`query PingMessage($message: String!) {
+      ping(message: $message)
+    }`,
+    // Paramètres statiques
+    variables: {
+      message: 'Meow',
+    },
+  },
+},
+```
+
+Vous pouvez utiliser les options Apollo `watchQuery` dans l'objet, comme ceci :
+ - `fetchPolicy`
+ - `pollInterval`
+ - ...
+
+Consulter la [documentation d'Apollo](https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery) pour plus de détails.
+
+Par exemple, vous pouvez ajouter l'option Apollo `fetchPolicy` comme ceci :
+
+```js
+apollo: {
+  // Requête avec des paramètres
+  ping: {
+    query: gql`query PingMessage($message: String!) {
+      ping(message: $message)
+    }`,
+    variables: {
+      message: 'Meow'
+    },
+    // Options supplémentaires
+    fetchPolicy: 'cache-and-network',
+  },
+},
+```
+
+À nouveau, vous pouvez utiliser votre propriété dans votre composant Vue :
+
+```js
+data () {
+  return {
+    // Initialisation de votre donnée Apollo
+    ping: '',
+  }
+},
+```
+
+Côté serveur, ajoutez le schéma et le résolveur correspondants :
+
+```js
+export const schema = `
+type Query {
+  ping(message: String!): String
+}
+
+schema {
+  query: Query
+}
+`
+
+export const resolvers = {
+  Query: {
+    ping (root, { message }, context) {
+      return `Réponse à ${message}`
+    },
+  },
+}
+```
+
+Et vous pouvez l'utiliser dans votre composant Vue :
+
+```vue
+<template>
+  <div class="apollo">
+    <h3>Ping</h3>
+    <p>
+      {{ ping }}
+    </p>
+  </div>
+</template>
+```
+
+## État de chargement
+
+Vous pouvez afficher un état de chargement grâce à la prop `$apollo.loading` :
+
+```vue
+<div v-if="$apollo.loading">Chargement...</div>
+```
+
+Ou bien cette requête spécifique `ping` :
+
+```vue
+<div v-if="$apollo.queries.ping.loading">Chargement...</div>
+```
+
+## Fonction d'options
+
+Vous pouvez utiliser une fonction qui sera appelée quand le composant est créé, et qui retourne l'objet d'options :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Requête avec des paramètres
+  ping () {
+    // Appelé lors de la création du composant
+    // Doit retourner un objet d'options
+    return {
+      // Requête gql
+      query: gql`query PingMessage($message: String!) {
+        ping(message: $message)
+      }`,
+      // Paramètres statiques
+      variables: {
+        message: 'Miaou',
+      },
+    }
+  },
+},
+```
+
+::: tip
+Cela fonctionne également pour les [souscriptions](./subscriptions.md).
+:::
+
+## Définition de requête réactive
+
+Vous pouvez utiliser une fonction pour l'option `query`. Cela rafraîchira la définition de requête GraphQL automatiquement :
+
+```js
+// Le libellé mis en avant peut être soit un libellé au hasard, ou bien le dernier ajouté
+featuredTag: {
+  query () {
+    // Vous pouvez accéder à l'instance du composant avec 'this'
+    if (this.showTag === 'random') {
+      return gql`{
+        randomTag {
+          id
+          label
+          type
+        }
+      }`
+    } else if (this.showTag === 'last') {
+      return gql`{
+        lastTag {
+          id
+          label
+          type
+        }
+      }`
+    }
+  },
+  // Nous devons assigner la valeur de la propriété 'featuredTag' du composant
+  update: data => data.randomTag || data.lastTag,
+},
+```
+
+::: tip
+Cela fonctionne également pour les [souscriptions](./subscriptions.md).
+:::
+
+## Paramètres réactifs
+
+Vous pouvez utiliser une fonction pour rendre les paramètres réactifs avec les propriétés Vue :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Requête avec des paramètres
+  ping: {
+    query: gql`query PingMessage($message: String!) {
+      ping(message: $message)
+    }`,
+    // Paramètres réactifs
+    variables () {
+      // Utilisez des propriétés réactives Vue
+      return {
+          message: this.pingInput,
+      }
+    },
+  },
+},
+```
+
+Cela requêtera à nouveau à chaque fois qu'un paramètre change, par exemple :
+
+```vue
+<template>
+  <div class="apollo">
+    <h3>Ping</h3>
+    <input v-model="pingInput" placeholder="Saisissez un message" />
+    <p>
+      {{ping}}
+    </p>
+  </div>
+</template>
+```
+
+## Sauter la requête
+
+Si la requête est sautée, elle est désactivée et ne sera plus mise à jour. Vous pouvez utiliser l'options `skip` :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  tags: {
+    // Requête GraphQL
+    query: gql`query tagList ($type: String!) {
+      tags(type: $type) {
+        id
+        label
+      }
+    }`,
+    // Variables réactives
+    variables () {
+      return {
+        type: this.type,
+      }
+    },
+    // Désactivation de la requête
+    skip () {
+      return this.skipQuery
+    },
+  },
+},
+```
+
+Ici, `skip` est appelé automatiquement dès que la propriété `skipSubscription` du composant change.
+
+Vous pouvez aussi accéder à la souscription directemnt et assigner la propriété `skip` :
+
+```js
+this.$apollo.queries.tags.skip = true
+```
+
+Si la requête `skip` devient `false`, la requête s'exécutera à nouveau automatiquement.
+
+## Exemple de requête réaxctive
+
+Voici un exemple de requête réactive utilisant le *polling* :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Propriété `tags` sur l'instance Vue
+  tags: {
+    query: gql`query tagList {
+      tags {
+        id,
+        label
+      }
+    }`,
+    pollInterval: 300, // millisecondes
+  },
+},
+```
+
+Voici à quoi ressemble le serveur :
+
+```js
+export const schema = `
+type Tag {
+  id: Int
+  label: String
+}
+
+type Query {
+  tags: [Tag]
+}
+
+schema {
+  query: Query
+}
+`
+
+
+// Faux générateur de mots
+import casual from 'casual'
+
+// Générons quelques libellés
+var id = 0
+var tags = []
+for (let i = 0; i < 42; i++) {
+  addTag(casual.word)
+}
+
+function addTag (label) {
+  let t = {
+    id: id++,
+    label,
+  }
+  tags.push(t)
+  return t
+}
+
+export const resolvers = {
+  Query: {
+    tags(root, args, context) {
+      return tags
+    },
+  },
+}
+```
+
+## Éditer une requête intelligente manuellement
+
+Vous pouvez ajouter une requête intelligente manuellement avec la méthode `$apollo.addSmartQuery(key, options)` :
+
+```js
+created () {
+  this.$apollo.addSmartQuery('comments', {
+    // Quelques options comme au-dessus
+  })
+}
+```
+
+::: tip
+En interne, cette méthode est appelée pour chaque entrée de l'option `apollo` du composant.
+:::
+
+## Options avancées
+
+Il y a encore bien d'autres options spécifiques à Vue Apollo, consultez [la référence API](../../api/smart-query.md).

From 251b73a12e6a95dd0d848b3fcc2b0b8ed1de4d94 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:26:11 +0100
Subject: [PATCH 26/38] feat: translate API README

---
 packages/docs/src/fr/api/README.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/docs/src/fr/api/README.md

diff --git a/packages/docs/src/fr/api/README.md b/packages/docs/src/fr/api/README.md
new file mode 100644
index 00000000..e0ece1f5
--- /dev/null
+++ b/packages/docs/src/fr/api/README.md
@@ -0,0 +1,7 @@
+# Référence API
+
+Bienvenue dans la référence API !
+
+::: warning Work-in-Progress
+Si quelque chose manque, merci d'ouvrir une pull request !
+:::

From cf74735ca3c66a0ccc7805df4edbef28a36ddd06 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:31:42 +0100
Subject: [PATCH 27/38] feat: translate API ssr

---
 packages/docs/src/fr/api/ssr.md | 48 +++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/docs/src/fr/api/ssr.md

diff --git a/packages/docs/src/fr/api/ssr.md b/packages/docs/src/fr/api/ssr.md
new file mode 100644
index 00000000..35b01be2
--- /dev/null
+++ b/packages/docs/src/fr/api/ssr.md
@@ -0,0 +1,48 @@
+# ApolloSSR
+
+## Utilisation
+
+Voir le [guide du rendu côté serveur (SSR)](../guide/ssr.md).
+
+## Méthodes
+
+### getStates
+
+Retourne les états des stores Apollo sous forme d'objets.
+
+```js
+const states = ApolloSSR.getStates(apolloProvider, options)
+```
+
+`options` utilise par défaut :
+
+```js
+{
+  // Préfixe pour les clés de chaque état du client Apollo
+  exportNamespace: '',
+}
+```
+
+### exportStates
+
+Retourne les états des stores Apollo sous forme de code JavaScript dans une `string`. Ce code peut être injecté directement dans la page HTML dans une balise `<script>`.
+
+```js
+const js = ApolloSSR.exportStates(apolloProvider, options)
+```
+
+`options` utilise par défaut :
+
+```js
+{
+  // Nom de la variable globale
+  globalName: '__APOLLO_STATE__',
+  // Nom de l'objet global sur lequel la variable est attachée
+  attachTo: 'window',
+  // Préfixe pour les clés de chaque état du client Apollo
+  exportNamespace: '',
+  // Par défaut, on utilise la bibliothèque Sanitize JS pour éviter les injections XSS
+  // Assigner à `true` exécutera un JSON.stringify standard sur le statut
+  useUnsafeSerializer: false,
+}
+```

From b06f061c6216053d773aac325b07a8ff8d13daaf Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:41:56 +0100
Subject: [PATCH 28/38] feat: translate API smart subscription

---
 .../docs/src/fr/api/smart-subscription.md     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/docs/src/fr/api/smart-subscription.md

diff --git a/packages/docs/src/fr/api/smart-subscription.md b/packages/docs/src/fr/api/smart-subscription.md
new file mode 100644
index 00000000..8590bc52
--- /dev/null
+++ b/packages/docs/src/fr/api/smart-subscription.md
@@ -0,0 +1,49 @@
+# Souscription intelligente
+
+Chaque souscription déclarée dans l'option `apollo.$subscribe` dans les résultats d'un composant génère la création d'iun objet de souscriptions intelligentes.
+
+## Options
+
+- `query`: document GraphQL (un fichier ou une chaîne `gql`).
+- `variables`: un objet ou une fonction réactive qui retourne un objet. Chaque clé est mappée avrc un `'$'` dans le document GraphQL, par exemple `foo` devient `$foo`.
+- `throttle`: régule les mises à jour des variables (en millisecondes).
+- `debounce`: stabilise les mises à jour des variables (en millisecondes).
+- `result(data, key)` est un hook appelé lorsqu'un résultat est reçu
+- `error(error)` est un hook appelé quand des erreurs surviennent. `error` est un objet d'erreur Apollo avec soit une propriété `graphQLErrors` ou bien une propriété `networkError`.
+- `skip` est un booléan ou une fonction (réactive) qui retourne un booléen. La fonction reçoit le composant en cours et la clé d'une requête intelligente en arguments, pour pouvoir être utilisé dans `$query` et dans les `defaultOptions` d'`ApolloProvider`.
+
+## Propriétés
+
+### Skip
+
+Vous pouvez mettre `skip` en pause ou pas :
+
+```js
+this.$apollo.subscriptions.users.skip = true
+```
+
+## Méthodes
+
+### refresh
+
+Arrête et reprend une requête :
+
+```js
+this.$apollo.subscriptions.users.refresh()
+```
+
+### start
+
+Démarre une requête :
+
+```js
+this.$apollo.subscriptions.users.start()
+```
+
+### stop
+
+Arrête une requête :
+
+```js
+this.$apollo.subscriptions.users.stop()
+```

From 75e7e54cb8b6cdaa57f5a74499a51d6be453d791 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:50:22 +0100
Subject: [PATCH 29/38] feat: translate API apollo mutation

---
 packages/docs/src/fr/api/apollo-mutation.md | 49 +++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/docs/src/fr/api/apollo-mutation.md

diff --git a/packages/docs/src/fr/api/apollo-mutation.md b/packages/docs/src/fr/api/apollo-mutation.md
new file mode 100644
index 00000000..0ed9fbdd
--- /dev/null
+++ b/packages/docs/src/fr/api/apollo-mutation.md
@@ -0,0 +1,49 @@
+# Composant ApolloMutation
+
+Exemple :
+
+```vue
+<ApolloMutation
+  :mutation="gql => gql`
+    mutation DoStuff ($name: String!) {
+      someWork (name: $name) {
+        success
+        timeSpent
+      }
+    }
+  `"
+  :variables="{
+    name
+  }"
+  @done="onDone"
+>
+  <template v-slot="{ mutate, loading, error }">
+    <button :disabled="loading" @click="mutate()">Cliquez ici</button>
+    <p v-if="error">Une erreur est survenue : {{ error }}</p>
+  </template>
+</ApolloMutation>
+```
+
+## Props
+
+- `mutation`: une requête GraphQL (transformée par `graphql-tag`) ou bien une fonction qui reçoit le gabarit `gql` comme argument et doit retourner la requête transformée
+- `variables`: objet de variables GraphQL
+- `optimisticResponse`: Consultez le guide sur [les interfaces optimistes](https://www.apollographql.com/docs/react/performance/optimistic-ui/)
+- `update`: Consultez le guide sur [comment mettre à jour le cache après une mutation](https://www.apollographql.com/docs/react/data/mutations/#options)
+- `refetchQueries`: Consultez le guide sur [comment re-requêter après une mutation](https://www.apollographql.com/docs/react/data/mutations/#options)
+- `clientId`: l'identifiant du client Apollo utilisé par la requête (défini dans l'option `clients` d'ApolloProvider)
+- `tag`: le nom de la balise HTML (par défaut: `div`); si `undefined`, le composant n'a pas de rendu (le contenu ne sera pas englobé dans une balise)
+- `context`: Consultez [l'option `context` d'Apollo](https://www.apollographql.com/docs/react/data/mutations/#options)
+
+## Les props de slots avec portée
+
+- `mutate(options = undefined)`: une fonction pour appeler une mutation. Vous pouvez écraser les options de mutation (par exemple : `mutate({ variables: { foo: 'bar } })`)
+- `loading`: un booléen qui indique que la requête est en cours
+- `error`: un erreur évntuelle lors de la dernière mutation
+- `gqlError`: la première erreur GraphQL évntuelle
+
+## Événements
+
+- `done(resultObject)`
+- `error(errorObject)`
+- `loading(boolean)`

From a0879c9d8f2a6e56eafb7b2d36f161573b339409 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 11:56:29 +0100
Subject: [PATCH 30/38] feat: translate API apollo subscribe to more

---
 .../src/fr/api/apollo-subscribe-to-more.md    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/docs/src/fr/api/apollo-subscribe-to-more.md

diff --git a/packages/docs/src/fr/api/apollo-subscribe-to-more.md b/packages/docs/src/fr/api/apollo-subscribe-to-more.md
new file mode 100644
index 00000000..831bf6c0
--- /dev/null
+++ b/packages/docs/src/fr/api/apollo-subscribe-to-more.md
@@ -0,0 +1,55 @@
+# Composant ApolloSubscribeToMore
+
+Exemple :
+
+```vue
+<template>
+  <ApolloQuery :query="...">
+    <ApolloSubscribeToMore
+      :document="gql => gql`
+        subscription messageChanged ($channelId: ID!) {
+          messageAdded (channelId: $channelId) {
+            type
+            message {
+              id
+              text
+            }
+          }
+        }
+      `"
+      :variables="{ channelId }"
+      :updateQuery="onMessageAdded"
+    />
+
+    <!-- ... -->
+  </ApolloQuery>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      channel: 'general',
+    }
+  },
+
+  methods: {
+    onMessageAdded (previousResult, { subscriptionData }) {
+      // Le résultat précédent est immutable
+      const newResult = {
+        messages: [...previousResult.messages],
+      }
+      // Ajoute la question au tableau
+      newResult.messages.push(subscriptionData.data.messageAdded)
+      return newResult
+    },
+  },
+}
+</script>
+```
+
+## Props
+
+- `document`: un document GraphQL qui contient la souscription ou une fonction qui reçoit le gabrit `gql` en argument et doit retourner le document transformé.
+- `variables`: un objet qui met automatiquement à jour les variables de souscription.
+- `updateQuery`: une fonction qui met à jour le résultat de requête si nécessaire.

From 46e2c83ffba9b3ca6d536b811e1aad6924123df9 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 12:00:15 +0100
Subject: [PATCH 31/38] feat: translate API apollo provider

---
 packages/docs/src/fr/api/apollo-provider.md | 49 +++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/docs/src/fr/api/apollo-provider.md

diff --git a/packages/docs/src/fr/api/apollo-provider.md b/packages/docs/src/fr/api/apollo-provider.md
new file mode 100644
index 00000000..cfbc7658
--- /dev/null
+++ b/packages/docs/src/fr/api/apollo-provider.md
@@ -0,0 +1,49 @@
+# ApolloProvider
+
+## Constructeur
+
+```js
+const apolloProvider = new VueApollo({
+  // Support de plusieurs clients
+  // Utilise l'option 'client' dans les requêtes
+  // ou bien '$client' sur la définition Apollo
+  clients: {
+    a: apolloClientA,
+    b: apolloClientB,
+  },
+  // Client par défaut
+  defaultClient: apolloClient,
+  // Défition 'apollo' par défaut
+  defaultOptions: {
+    // Consultez la définition 'apollo'
+    // Par exemple : les options de requête par défaut
+    $query: {
+      loadingKey: 'loading',
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+  // Observation de l'état de chargement pour toutes les requêtes
+  // Consultez 'Requêtes intelligentes > options > watchLoading' pour plus de détails
+  watchLoading (isLoading, countModifier) {
+    loading += countModifier
+    console.log('Global loading', loading, countModifier)
+  },
+  // Gestion globale des erreurs pour toutes les requêtes intelligentes et les souscriptions
+  errorHandler (error) {
+    console.log('Gestion globale des erreurs')
+    console.error(error)
+  },
+  // Désactivation globale de la pré-requête lors du rendu côté serveur (SSR)
+  prefetch: Boolean,
+})
+```
+
+Vous pouvez utiliser le provider Apollo dans votre application Vue :
+
+```js
+new Vue({
+  el: '#app',
+  apolloProvider,
+  render: h => h(App),
+})
+```

From 211d066a006bed4fa8284e0dc6cf8be13bdcc255 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 12:25:54 +0100
Subject: [PATCH 32/38] feat: translate API apollo query

---
 packages/docs/src/fr/api/apollo-query.md | 69 ++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/docs/src/fr/api/apollo-query.md

diff --git a/packages/docs/src/fr/api/apollo-query.md b/packages/docs/src/fr/api/apollo-query.md
new file mode 100644
index 00000000..2808bd05
--- /dev/null
+++ b/packages/docs/src/fr/api/apollo-query.md
@@ -0,0 +1,69 @@
+# Composant ApolloQuery
+
+Exemple :
+
+```vue
+<ApolloQuery
+  :query="gql => gql`
+    query MyHelloQuery ($name: String!) {
+      hello (name: $name)
+    }
+  `"
+  :variables="{ name }"
+>
+  <template v-slot="{ result: { error, data }, isLoading }">
+    <!-- Chargement -->
+    <div v-if="isLoading" class="loading apollo">Chargement...</div>
+
+    <!-- Erreur -->
+    <div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
+
+    <!-- Résultat -->
+    <div v-else-if="data" class="result apollo">{{ data.hello }}</div>
+
+    <!-- Pas de résultat -->
+    <div v-else class="no-result apollo">Pas de résultat :(</div>
+  </template>
+</ApolloQuery>
+```
+
+::: warning
+Pour activer le support du gabarit étiqueté `gql` dans les templates Vue, consultez l'étape nécessaire dans [le guide](../guide/components/query.md#tag-setup).
+:::
+
+## Props
+
+- `query`: une requête GraphQL (transformée par `graphql-tag`) ou bien une fonction qui reçoit le gabarit `gql` comme argument et doit retourner la requête transformée
+- `variables`: objet de variables GraphQL
+- `fetchPolicy`: consultez [l'option `fetchPolicy` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
+- `pollInterval`: consultez [l'option `pollInterval` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
+- `notifyOnNetworkStatusChange`: consultez [l'option `notifyOnNetworkStatusChange` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
+- `context`: consultez [l'option `context` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
+- `update`: une fonction qui transforme le résultat `data`, pratique pour récupérer des parties spécifiques de la réponse. Exemple : `:update="data => data.user.messages"`
+- `skip`: un booléen qui désative le requêtage
+- `clientId`: l'identifiant du client Apollo utilisé par la requête (défini dans l'option `clients` d'ApolloProvider)
+- `deep`: booléen pour permettre l'utilisation d'observateurs Vue imbriqués
+- `tag`: le nom de la balise HTML (par défaut: `div`); si évalue à `false` (par exemple `null` ou `undefined`), le composant n'a pas de rendu (le contenu ne sera pas englobé dans une balise), et dans ce cas, uniquement le premier enfant sera rendu
+- `debounce`: nombre de millisecondes pour stabiliser les nouvelles requêtes (par exemple quand les variables changent)
+- `throttle`: nombre de millisecondes pour réguler les nouvelles requêtes (par exemple quand les variables changent)
+- `prefetch`: si `false`, pas de pré-requête lors du rendu côté serveur (SSR)
+- `options`: autres options Apollo Watch Query
+
+## Slots avec portée
+
+- `result`: résulta Apollo Query
+  - `result.data`: donnée retournée par la requête (peut être transformée dans la prop `update`)
+  - `result.fullData`: donnée brute retournée par la requête (non transformée dans la prop `update`)
+  - `result.loading`: un booléen qui indique si requête est en cours (il est possible que vous deviez assigner la prop `notifyOnNetworkStatusChange` pour qu'il se mette à jour)
+  - `result.error`: erreur évntuelle pour le résultat en cours
+  - `result.networkStatus`: consultez [l'option `networkStatus` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#result)
+- `query`: requête intelligente associée au composant. C'est pratique pour exécuter certaines opérations comme `query.refetch` ou bien `query.fetchMore`.
+- `isLoading`: état de chargement de la requête intelligente
+- `gqlError`: la première erreur GraphQL évntuelle
+- `times`: combien de fois le résultat a été mis à jour
+
+## Événements
+
+- `result(resultObject)`
+- `error(errorObject)`
+- `loading(boolean)`

From 67fcc7bcd6ac1342493cbd3c669a689029ada9b9 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 12:31:11 +0100
Subject: [PATCH 33/38] feat: translate API dollar apollo

---
 packages/docs/src/fr/api/dollar-apollo.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/docs/src/fr/api/dollar-apollo.md

diff --git a/packages/docs/src/fr/api/dollar-apollo.md b/packages/docs/src/fr/api/dollar-apollo.md
new file mode 100644
index 00000000..9c4a765d
--- /dev/null
+++ b/packages/docs/src/fr/api/dollar-apollo.md
@@ -0,0 +1,23 @@
+# Dollar Apollo
+
+Il s'agit du gestionnaire Apollo ajouté à chaque composant qui utilise Apollo. Il est possible d'y accéder à l'intérieur d'un composant via `this.$apollo`.
+
+## Propriétés
+
+- `vm`: composant associé.
+- `queries`: tableau des requêtes intelligentes du composant.
+- `subscriptions`: tableau des souscriptions intelligentes du composant.
+- `provider`: [Apollo Provider](./apollo-provider.md) injecté.
+- `loading`: si au moins une requête est en cours.
+- `skipAllQueries`: (mutateur) booléen pour mettre en pause ou redémarrer toutes les requêtes intelligentes.
+- `skipAllSubscriptions`: (mutateur) booléen pour mettre en pause ou redémarrer toutes les souscriptions intelligentes.
+- `skipAll`: (mutateur) booléen pour mettre en pause ou redémarrer toutes les requêtes et souscriptions intelligentes.
+
+## Méthodes
+
+- `query`: exécute une requête (consultez [Requêtes](../guide/apollo/queries.md)).
+- `mutate`: exécute une mutation (consultez [Mutations](../guide/apollo/mutations.md)).
+- `subscribe`: méthode de souscription standard Apollo (consultez [Souscriptions](../guide/apollo/subscriptions.md)).
+- `addSmartQuery`: ajouter une requête intelligente manuellement (non recommandé).
+- `addSmartSubscription`: ajouter une souscription intelligente manuellement (consultez [Souscriptions](../guide/apollo/subscriptions.md)).
+- `getClient`: retourne le client Apollo utilisé.

From b5cc2ca70cb1cdfbcecb577d99b9ae3aa82ae00d Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 13:00:19 +0100
Subject: [PATCH 34/38] feat: translate API smart query

---
 packages/docs/src/fr/api/smart-query.md | 254 ++++++++++++++++++++++++
 1 file changed, 254 insertions(+)
 create mode 100644 packages/docs/src/fr/api/smart-query.md

diff --git a/packages/docs/src/fr/api/smart-query.md b/packages/docs/src/fr/api/smart-query.md
new file mode 100644
index 00000000..bf4b8f1b
--- /dev/null
+++ b/packages/docs/src/fr/api/smart-query.md
@@ -0,0 +1,254 @@
+# Requête intelligente
+
+Chaque requête déclarée dans la définition `apollo` (c'est-à-dire, qui ne commence pas avec un signe `$`) d'un composant donne lieu à la création d'une requête intelligente.
+
+## Options
+
+- `query`: document GraphQL (un fichier ou une chaîne `gql`).
+- `variables`: un objet ou une fonction réactive qui retourne un objet. Chaque clé est mappée avec un `'$'` dans le document GraphQL, par exemple `foo` devient `$foo`.
+- `throttle`: régule les mises à jour des variables (en millisecondes).
+- `debounce`: stabilise les mises à jour des variables (en millisecondes).
+- `pollInterval`: mise à jour automatique en utilisant le *polling* (en requêtant toutes les `x` millisecondes). Par défaut : `undefined`, `0` - arrêt du polling.
+- `update(data) {return ...}` pour personnaliser la valeur qui est assignée dans la propriété Vue, par exemple si les noms de champs ne correspondent pas.
+- `result(ApolloQueryResult, key)` est un hook appelé lorsqu'un résultat est reçu (consultez la documentation de [ApolloQueryResult](https://github.com/apollographql/apollo-client/blob/master/src/core/types.ts)). `key` est la clé de requête dans l'option `apollo`.
+- `error(error, vm, key, type, options)` est un hook appelé lorsqu'une erreur survient. `error` est une erreur Apollo avec soit une propriété `graphQLErrors` ou bien une propriété `networkError`. `vm` est l'instance du composant correspondant. `key` est la clé de la requête intelligente. `type` est soit `'query'` ou `'subscription'`. `options` est l'objet d'options `watchQuery` final.
+- `loadingKey` met à jour la propriété de donnée du composant passée en valeur. Vous devez initialiser cette propriété à `0` dans le hook `data` du composant. Quand la requête charge, cette propriété est incrémentée de 1. Quand elle termine de charger, elle est décrémentée de 1. De cette façon, cette propriété peut servir de compteur des requêtes en cours.
+- `watchLoading(isLoading, countModifier)` est un hook appelé lorsque l'état de chargement d'une requête change. Le paramètre `countModifier` est égal à `1` quand la requête charge, ou `-1` quand elle a terminé.
+- `manual` est un booléen qui permet de désactiver les mises à jour automatiques des propriétés. Si vous l'utilisez, vous devez spécifier une fonction de retour `result` (voir l'exemple ci-dessous).
+- `deep` est un booléen qui permet d'utiliser `deep: true` sur les observateurs Vue.
+- `skip` est un booléen ou une fonction (réactive) qui retourne un booléen. La fonction reçoit le composant en cours et la clé d'une requête intelligente en arguments, pour pouvoir être utilisé dans `$query` et dans les `defaultOptions` d'`ApolloProvider`.
+- `subscribeToMore`: un objet ou un tableau d'objets d'[options subscribeToMore](../guide/apollo/subscriptions.md#subscribetomore).
+- `prefetch` est soit un booléen, soit une fonction qui détermine si une requête doit être pré-requêtée. Consultez [Rendu côté serveur (SSR)](../guide/ssr.md).
+- Vous pouvez également utiliser n'importe quelle autre option `watchQuery` options (consultez [la documentation d'Apollo](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.watchQuery)).
+
+Exemple :
+
+```js
+// Options spécifiques à Apollo
+apollo: {
+  // Requête avancée avec des paramètres
+  // La méthode 'variables' est observée par Vue
+  pingMessage: {
+    query: gql`query PingMessage($message: String!) {
+      ping(message: $message)
+    }`,
+    // Paramètres réactifs
+    variables () {
+      // Utilisez des propriétés réactives Vue
+      return {
+        message: this.pingInput,
+      }
+    },
+    // Variables : observation imbriquée
+    deep: false,
+    // On utilise une fonction de retour personnalisée car
+    // les noms de champs ne correspondent pas
+    // Par défaurt, l'attribut 'pingMessage'
+    // serait utilisé sur l'objet de résultat 'data'
+    // Ici, nous savons que le résultat est dans l'attribut 'ping'
+    // sachant comment le serveur Apollo fonctionn
+    update (data) {
+      console.log(data)
+      // La valeur retournée met à jour
+      // la propriété Vue 'pingMessage'
+      return data.ping
+    },
+    // Hook de résultat optionnel
+    result ({ data, loading, networkStatus }) {
+      console.log('Nous avons des résultats !')
+    },
+    // Gestion d'erreur
+    error (error) {
+      console.error('Nous avons une erreur !', error)
+    },
+    // État de chargement
+    // loadingKey est le nom de la propriété
+    // qui sera incrémentée quand la requête chargera
+    // et décrémentée lorsqu'elle sera terminée.
+    loadingKey: 'loadingQueriesCount',
+    // watchLoading est appelé quand l'état de chargement change
+    watchLoading (isLoading, countModifier) {
+      // isLoading est un booléen
+      // countModifier est soit 1 ou -1
+    },
+  },
+},
+```
+
+Si vous utilisez `ES2015`, vous pouvez également écrire `update` de cette façon :
+
+```js
+update: data => data.ping
+```
+
+Exemple en mode manuel :
+
+```js
+{
+  query: gql`...`,
+  manual: true,
+  result ({ data, loading }) {
+    if (!loading) {
+      this.items = data.items
+    }
+  },
+}
+```
+
+## Propriétés
+
+### Skip
+
+Vous pouvez mettre `skip` en pause ou pas :
+
+```js
+this.$apollo.queries.users.skip = true
+```
+
+### loading
+
+Si la requête est en cours :
+
+```js
+this.$apollo.queries.users.loading
+```
+
+## Méthodes
+
+### refresh
+
+Arrête et reprend la requête :
+
+```js
+this.$apollo.queries.users.refresh()
+```
+
+### start
+
+Démarre la requête :
+
+```js
+this.$apollo.queries.users.start()
+```
+
+### stop
+
+Arrête la requête :
+
+```js
+this.$apollo.queries.users.stop()
+```
+
+### fetchMore
+
+Charge plus de données pour la pagination :
+
+```js
+this.page++
+
+this.$apollo.queries.tagsPage.fetchMore({
+  // Nouvelles variables
+  variables: {
+    page: this.page,
+    pageSize,
+  },
+  // Transformation du résultat précédent avec de nouvelles données
+  updateQuery: (previousResult, { fetchMoreResult }) => {
+    const newTags = fetchMoreResult.tagsPage.tags
+    const hasMore = fetchMoreResult.tagsPage.hasMore
+
+    this.showMoreEnabled = hasMore
+
+    return {
+      tagsPage: {
+        __typename: previousResult.tagsPage.__typename,
+        // Union des tableaux de libellés
+        tags: [...previousResult.tagsPage.tags, ...newTags],
+        hasMore,
+      },
+    }
+  },
+})
+```
+
+### subscribeToMore
+
+Souscrire à plus de data en utilisant des souscription GraphQL :
+
+```js
+// Nous devons nous désinscrire avant de souscrire à nouveau
+if (this.tagsSub) {
+  this.tagsSub.unsubscribe()
+}
+// Souscription dans la requête
+this.tagsSub = this.$apollo.queries.tags.subscribeToMore({
+  document: TAG_ADDED,
+  variables: {
+    type,
+  },
+  // Mutation du résultat précédent
+  updateQuery: (previousResult, { subscriptionData }) => {
+    // Si nous avons déjà ajouté le libellé, on ne fait rien
+        // Cela peut être causé par `updateQuery` dans notre mutation addTag
+    if (previousResult.tags.find(tag => tag.id === subscriptionData.data.tagAdded.id)) {
+      return previousResult
+    }
+
+    return {
+      tags: [
+        ...previousResult.tags,
+        // Ajout du nouveau libellé
+        subscriptionData.data.tagAdded,
+      ],
+    }
+  },
+})
+```
+
+### refetch
+
+Requête à nouveau, potentiellement avec de nouvelles variables :
+
+```js
+this.$apollo.queries.users.refetch()
+// Avec de nouvelles variables
+this.$apollo.queries.users.refetch({
+  friendsOf: 'id-user'
+})
+```
+
+### setVariables
+
+Met à jour les variables de la requête et l'exécute à nouveau si elle a changé. Pour forcer une requête, vous pouvez utiliser `refetch`.
+
+```js
+this.$apollo.queries.users.setVariables({
+  friendsOf: 'id-uset'
+})
+```
+
+### setOptions
+
+Met à jour les options Apollo [watchQuery](https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery) et requête à nouveau :
+
+```js
+this.$apollo.queries.users.setOptions({
+  fetchPolicy: 'cache-and-network'
+})
+```
+
+### startPolling
+
+Commence une mise à jour automatique en utilisant le *polling* (en requêtant toutes les `x` millisecondes) :
+
+```js
+this.$apollo.queries.users.startPolling(2000) // millisecondes
+```
+
+### stopPolling
+
+Arrêt du *polling* :
+
+```js
+this.$apollo.queries.users.stopPolling()
+```

From 458c10d9dea72074e2134cc35af0282ede7d25df Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Thu, 6 Feb 2020 13:00:35 +0100
Subject: [PATCH 35/38] fix: small adjustments

---
 packages/docs/src/.vuepress/config.js          |  2 +-
 packages/docs/src/fr/api/smart-subscription.md | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/.vuepress/config.js b/packages/docs/src/.vuepress/config.js
index 54e38752..5a53a4fc 100644
--- a/packages/docs/src/.vuepress/config.js
+++ b/packages/docs/src/.vuepress/config.js
@@ -233,7 +233,7 @@ module.exports = {
         },
       },
       '/fr/': {
-        selectText: 'Languges',
+        selectText: 'Langages',
         label: 'Français',
         lastUpdated: 'Dernière mise à jour',
         nav: [
diff --git a/packages/docs/src/fr/api/smart-subscription.md b/packages/docs/src/fr/api/smart-subscription.md
index 8590bc52..46cc2b52 100644
--- a/packages/docs/src/fr/api/smart-subscription.md
+++ b/packages/docs/src/fr/api/smart-subscription.md
@@ -5,12 +5,12 @@ Chaque souscription déclarée dans l'option `apollo.$subscribe` dans les résul
 ## Options
 
 - `query`: document GraphQL (un fichier ou une chaîne `gql`).
-- `variables`: un objet ou une fonction réactive qui retourne un objet. Chaque clé est mappée avrc un `'$'` dans le document GraphQL, par exemple `foo` devient `$foo`.
+- `variables`: un objet ou une fonction réactive qui retourne un objet. Chaque clé est mappée avec un `'$'` dans le document GraphQL, par exemple `foo` devient `$foo`.
 - `throttle`: régule les mises à jour des variables (en millisecondes).
 - `debounce`: stabilise les mises à jour des variables (en millisecondes).
 - `result(data, key)` est un hook appelé lorsqu'un résultat est reçu
 - `error(error)` est un hook appelé quand des erreurs surviennent. `error` est un objet d'erreur Apollo avec soit une propriété `graphQLErrors` ou bien une propriété `networkError`.
-- `skip` est un booléan ou une fonction (réactive) qui retourne un booléen. La fonction reçoit le composant en cours et la clé d'une requête intelligente en arguments, pour pouvoir être utilisé dans `$query` et dans les `defaultOptions` d'`ApolloProvider`.
+- `skip` est un booléen ou une fonction (réactive) qui retourne un booléen. La fonction reçoit le composant en cours et la clé d'une requête intelligente en arguments, pour pouvoir être utilisé dans `$query` et dans les `defaultOptions` d'`ApolloProvider`.
 
 ## Propriétés
 
@@ -26,7 +26,7 @@ this.$apollo.subscriptions.users.skip = true
 
 ### refresh
 
-Arrête et reprend une requête :
+Arrête et reprend la requête :
 
 ```js
 this.$apollo.subscriptions.users.refresh()
@@ -34,7 +34,7 @@ this.$apollo.subscriptions.users.refresh()
 
 ### start
 
-Démarre une requête :
+Démarre la requête :
 
 ```js
 this.$apollo.subscriptions.users.start()
@@ -42,7 +42,7 @@ this.$apollo.subscriptions.users.start()
 
 ### stop
 
-Arrête une requête :
+Arrête la requête :
 
 ```js
 this.$apollo.subscriptions.users.stop()

From 4dc4487894d1727ee7a205fccb3701826d960b15 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <dayan.sarah@gmail.com>
Date: Thu, 6 Feb 2020 13:15:25 +0100
Subject: [PATCH 36/38] Update packages/docs/src/fr/api/apollo-mutation.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Jérôme Schneider <jerome.schneider@algolia.com>
---
 packages/docs/src/fr/api/apollo-mutation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/fr/api/apollo-mutation.md b/packages/docs/src/fr/api/apollo-mutation.md
index 0ed9fbdd..85bd1960 100644
--- a/packages/docs/src/fr/api/apollo-mutation.md
+++ b/packages/docs/src/fr/api/apollo-mutation.md
@@ -39,7 +39,7 @@ Exemple :
 
 - `mutate(options = undefined)`: une fonction pour appeler une mutation. Vous pouvez écraser les options de mutation (par exemple : `mutate({ variables: { foo: 'bar } })`)
 - `loading`: un booléen qui indique que la requête est en cours
-- `error`: un erreur évntuelle lors de la dernière mutation
+- `error`: une erreur éventuelle lors de la dernière mutation
 - `gqlError`: la première erreur GraphQL évntuelle
 
 ## Événements

From 35a504bc0548a0aa65ebd6293aaf4623090a1374 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <dayan.sarah@gmail.com>
Date: Thu, 6 Feb 2020 13:15:35 +0100
Subject: [PATCH 37/38] Update
 packages/docs/src/fr/api/apollo-subscribe-to-more.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Jérôme Schneider <jerome.schneider@algolia.com>
---
 packages/docs/src/fr/api/apollo-subscribe-to-more.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/fr/api/apollo-subscribe-to-more.md b/packages/docs/src/fr/api/apollo-subscribe-to-more.md
index 831bf6c0..c71142a0 100644
--- a/packages/docs/src/fr/api/apollo-subscribe-to-more.md
+++ b/packages/docs/src/fr/api/apollo-subscribe-to-more.md
@@ -50,6 +50,6 @@ export default {
 
 ## Props
 
-- `document`: un document GraphQL qui contient la souscription ou une fonction qui reçoit le gabrit `gql` en argument et doit retourner le document transformé.
+- `document`: un document GraphQL qui contient la souscription ou une fonction qui reçoit le gabarit `gql` en argument et doit retourner le document transformé.
 - `variables`: un objet qui met automatiquement à jour les variables de souscription.
 - `updateQuery`: une fonction qui met à jour le résultat de requête si nécessaire.

From 5f0dce0cef7514ab01c9649727865e2454997f61 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <dayan.sarah@gmail.com>
Date: Thu, 6 Feb 2020 13:15:43 +0100
Subject: [PATCH 38/38] Update packages/docs/src/fr/api/apollo-mutation.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Jérôme Schneider <jerome.schneider@algolia.com>
---
 packages/docs/src/fr/api/apollo-mutation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/fr/api/apollo-mutation.md b/packages/docs/src/fr/api/apollo-mutation.md
index 85bd1960..a531ff29 100644
--- a/packages/docs/src/fr/api/apollo-mutation.md
+++ b/packages/docs/src/fr/api/apollo-mutation.md
@@ -40,7 +40,7 @@ Exemple :
 - `mutate(options = undefined)`: une fonction pour appeler une mutation. Vous pouvez écraser les options de mutation (par exemple : `mutate({ variables: { foo: 'bar } })`)
 - `loading`: un booléen qui indique que la requête est en cours
 - `error`: une erreur éventuelle lors de la dernière mutation
-- `gqlError`: la première erreur GraphQL évntuelle
+- `gqlError`: la première erreur GraphQL éventuelle
 
 ## Événements