feat: Vue Apollo docs in French 🇫🇷

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: {
@@ -24,6 +29,10 @@ module.exports = {
           message: "New content is available.",
           buttonText: "Refresh"
         },
+        '/fr/': {
+          message: "Du nouveau contenu est disponible.",
+          buttonText: "Rafraîchir"
+        },
       },
     },
   },
@@ -223,6 +232,101 @@ module.exports = {
           '/zh-cn/migration/': [''],
         },
       },
+      '/fr/': {
+        selectText: 'Langages',
+        label: 'Français',
+        lastUpdated: 'Dernière mise à jour',
+        nav: [
+          {
+            text: 'Guide',
+            link: '/fr/guide/',
+          },
+          {
+            text: 'API',
+            link: '/fr/api/',
+          },
+          {
+            text: 'Migration',
+            link: '/fr/migration/',
+          },
+          {
+            text: 'Plugin CLI',
+            link: 'https://github.com/Akryum/vue-cli-plugin-apollo',
+          },
+          {
+            text: 'Sponsor',
+            link: 'https://github.com/sponsors/Akryum',
+          },
+        ],
+        sidebarDepth: 2,
+        sidebar: {
+          '/fr/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',
+              ],
+            },
+          ],
+          '/fr/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',
+              ],
+            },
+          ],
+          '/fr/migration/': [''],
+        },
+      },
     },
   },
 }

packages/docs/src/fr/README.md

@@ -0,0 +1,50 @@
+---
+home: true
+heroImage: /logo.png
+actionText: Commencer →
+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 !
+- 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>

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 !
+:::

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`: une erreur éventuelle lors de la dernière mutation
+- `gqlError`: la première erreur GraphQL éventuelle
+
+## Événements
+
+- `done(resultObject)`
+- `error(errorObject)`
+- `loading(boolean)`

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),
+})
+```

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)`