Skip to content

Commit 03780e4

Browse files
sarahdayanJĂ©rĂŽme Schneider
sarahdayan
and
JĂ©rĂŽme Schneider
authored
docs: Vue Apollo docs in French đŸ‡«đŸ‡· (#920)
* chore: add meta information for the French translation * feat: translate README * feat: translate migration guide * feat: translate guide README * fix: add space before colon * feat: translate installation guide * feat: translate local state guide * feat: translate multiple clients guide * feat: translate testing guide * feat: translate ssr guide * feat: translate component README * feat: translate component subscribe to more guide * feat: translate component mutation guide * feat: translate component query guide * fix: consistency * feat: translate apollo README * fix: close broken link * fix: close broken link * fix: fix missing translation * fix: fix bad links * feat: translate apollo special options * feat: translate apollo mutations * feat: translate apollo pagination * feat: translate apollo subscriptions * feat: translate apollo queries * feat: translate API README * feat: translate API ssr * feat: translate API smart subscription * feat: translate API apollo mutation * feat: translate API apollo subscribe to more * feat: translate API apollo provider * feat: translate API apollo query * feat: translate API dollar apollo * feat: translate API smart query * fix: small adjustments * Update packages/docs/src/fr/api/apollo-mutation.md Co-Authored-By: JĂ©rĂŽme Schneider <[email protected]> * Update packages/docs/src/fr/api/apollo-subscribe-to-more.md Co-Authored-By: JĂ©rĂŽme Schneider <[email protected]> * Update packages/docs/src/fr/api/apollo-mutation.md Co-Authored-By: JĂ©rĂŽme Schneider <[email protected]> Co-authored-by: JĂ©rĂŽme Schneider <[email protected]>
1 parent c6f8e82 commit 03780e4

28 files changed

+3995
-0
lines changed

Diff for: ‎packages/docs/src/.vuepress/config.js

+104
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ module.exports = {
1414
lang: 'zh-CN',
1515
title: 'Vue Apollo',
1616
description: '🚀 ćœšäœ çš„ Vue.js ćș”甚䞭集成 GraphQL',
17+
},
18+
'/fr/': {
19+
lang: 'fr-FR',
20+
title: 'Vue Apollo',
21+
description: '🚀 IntĂ©grez GraphQL dans vos apps Vue.js !',
1722
}
1823
},
1924
plugins: {
@@ -24,6 +29,10 @@ module.exports = {
2429
message: "New content is available.",
2530
buttonText: "Refresh"
2631
},
32+
'/fr/': {
33+
message: "Du nouveau contenu est disponible.",
34+
buttonText: "RafraĂźchir"
35+
},
2736
},
2837
},
2938
},
@@ -223,6 +232,101 @@ module.exports = {
223232
'/zh-cn/migration/': [''],
224233
},
225234
},
235+
'/fr/': {
236+
selectText: 'Langages',
237+
label: 'Français',
238+
lastUpdated: 'DerniĂšre mise Ă  jour',
239+
nav: [
240+
{
241+
text: 'Guide',
242+
link: '/fr/guide/',
243+
},
244+
{
245+
text: 'API',
246+
link: '/fr/api/',
247+
},
248+
{
249+
text: 'Migration',
250+
link: '/fr/migration/',
251+
},
252+
{
253+
text: 'Plugin CLI',
254+
link: 'https://github.com/Akryum/vue-cli-plugin-apollo',
255+
},
256+
{
257+
text: 'Sponsor',
258+
link: 'https://github.com/sponsors/Akryum',
259+
},
260+
],
261+
sidebarDepth: 2,
262+
sidebar: {
263+
'/fr/guide/': [
264+
'',
265+
'installation',
266+
{
267+
title: 'Premiers pas',
268+
collapsable: false,
269+
children: [
270+
'apollo/',
271+
'apollo/queries',
272+
'apollo/mutations',
273+
'apollo/subscriptions',
274+
'apollo/pagination',
275+
'apollo/special-options',
276+
],
277+
},
278+
{
279+
title: 'Composants',
280+
collapsable: false,
281+
children: [
282+
'components/',
283+
'components/query',
284+
'components/mutation',
285+
'components/subscribe-to-more',
286+
],
287+
},
288+
{
289+
title: 'Utilisation avancée',
290+
collapsable: false,
291+
children: [
292+
'multiple-clients',
293+
'ssr',
294+
'local-state',
295+
'testing',
296+
],
297+
},
298+
],
299+
'/fr/api/': [
300+
{
301+
title: 'Vue Apollo',
302+
collapsable: false,
303+
children: [
304+
'apollo-provider',
305+
'dollar-apollo',
306+
'ssr',
307+
],
308+
},
309+
{
310+
title: 'Smart Apollo',
311+
collapsable: false,
312+
children: [
313+
'smart-query',
314+
'smart-subscription',
315+
],
316+
},
317+
{
318+
title: 'Apollo Components',
319+
collapsable: false,
320+
children: [
321+
'apollo-query',
322+
'apollo-mutation',
323+
'apollo-subscribe-to-more',
324+
],
325+
},
326+
],
327+
'/fr/migration/': [''],
328+
},
329+
},
226330
},
227331
},
228332
}

Diff for: ‎packages/docs/src/fr/README.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
home: true
3+
heroImage: /logo.png
4+
actionText: Commencer →
5+
actionLink: /fr/guide/
6+
features:
7+
- title: RafraĂźchissements automatiques
8+
details: Ne vous prĂ©occupez pas de refraĂźchir l'interface utilisteur ou de refaire les requĂȘtes !
9+
- title: Composants dans les templates
10+
details: Utilisez Apollo de façon vraiment déclarative grùce aux composants Apollo.
11+
- title: Compatible avec le rendu cÎté serveur
12+
details: Faites vos requĂȘtes cĂŽtĂ© serveur avant de rendre le HTML.
13+
footer: LICENCE MIT - Créé par Guillaume CHAU (@Akryum)
14+
---
15+
16+
<sponsor-button/>
17+
18+
## Sponsors
19+
20+
### Or
21+
22+
<p class="sponsors">
23+
<a href="https://www.sumcumo.com/en/" target="_blank">
24+
<img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" class="gold-sponsor">
25+
</a>
26+
27+
<a href="https://www.vuemastery.com/" target="_blank">
28+
<img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" class="gold-sponsor">
29+
</a>
30+
</p>
31+
32+
### Argent
33+
34+
<p class="sponsors">
35+
<a href="https://vueschool.io/" target="_blank">
36+
<img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg" alt="VueSchool logo" class="silver-sponsor">
37+
</a>
38+
</p>
39+
40+
### Bronze
41+
42+
<p class="sponsors">
43+
<a href="https://vuetifyjs.com" target="_blank">
44+
<img src="https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png" alt="Vuetify logo" class="bronze-sponsor">
45+
</a>
46+
47+
<a href="https://www.frontenddeveloperlove.com/" target="_blank" title="Frontend Developer Love">
48+
<img src="https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png" alt="Frontend Developer Love logo" class="bronze-sponsor">
49+
</a>
50+
</p>

Diff for: ‎packages/docs/src/fr/api/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Référence API
2+
3+
Bienvenue dans la référence API !
4+
5+
::: warning Work-in-Progress
6+
Si quelque chose manque, merci d'ouvrir une pull request !
7+
:::

Diff for: ‎packages/docs/src/fr/api/apollo-mutation.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Composant ApolloMutation
2+
3+
Exemple :
4+
5+
```vue
6+
<ApolloMutation
7+
:mutation="gql => gql`
8+
mutation DoStuff ($name: String!) {
9+
someWork (name: $name) {
10+
success
11+
timeSpent
12+
}
13+
}
14+
`"
15+
:variables="{
16+
name
17+
}"
18+
@done="onDone"
19+
>
20+
<template v-slot="{ mutate, loading, error }">
21+
<button :disabled="loading" @click="mutate()">Cliquez ici</button>
22+
<p v-if="error">Une erreur est survenue : {{ error }}</p>
23+
</template>
24+
</ApolloMutation>
25+
```
26+
27+
## Props
28+
29+
- `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
30+
- `variables`: objet de variables GraphQL
31+
- `optimisticResponse`: Consultez le guide sur [les interfaces optimistes](https://www.apollographql.com/docs/react/performance/optimistic-ui/)
32+
- `update`: Consultez le guide sur [comment mettre Ă  jour le cache aprĂšs une mutation](https://www.apollographql.com/docs/react/data/mutations/#options)
33+
- `refetchQueries`: Consultez le guide sur [comment re-requĂȘter aprĂšs une mutation](https://www.apollographql.com/docs/react/data/mutations/#options)
34+
- `clientId`: l'identifiant du client Apollo utilisĂ© par la requĂȘte (dĂ©fini dans l'option `clients` d'ApolloProvider)
35+
- `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)
36+
- `context`: Consultez [l'option `context` d'Apollo](https://www.apollographql.com/docs/react/data/mutations/#options)
37+
38+
## Les props de slots avec portée
39+
40+
- `mutate(options = undefined)`: une fonction pour appeler une mutation. Vous pouvez Ă©craser les options de mutation (par exemple : `mutate({ variables: { foo: 'bar } })`)
41+
- `loading`: un boolĂ©en qui indique que la requĂȘte est en cours
42+
- `error`: une erreur Ă©ventuelle lors de la derniĂšre mutation
43+
- `gqlError`: la premiĂšre erreur GraphQL Ă©ventuelle
44+
45+
## ÉvĂ©nements
46+
47+
- `done(resultObject)`
48+
- `error(errorObject)`
49+
- `loading(boolean)`

Diff for: ‎packages/docs/src/fr/api/apollo-provider.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# ApolloProvider
2+
3+
## Constructeur
4+
5+
```js
6+
const apolloProvider = new VueApollo({
7+
// Support de plusieurs clients
8+
// Utilise l'option 'client' dans les requĂȘtes
9+
// ou bien '$client' sur la définition Apollo
10+
clients: {
11+
a: apolloClientA,
12+
b: apolloClientB,
13+
},
14+
// Client par défaut
15+
defaultClient: apolloClient,
16+
// Défition 'apollo' par défaut
17+
defaultOptions: {
18+
// Consultez la définition 'apollo'
19+
// Par exemple : les options de requĂȘte par dĂ©faut
20+
$query: {
21+
loadingKey: 'loading',
22+
fetchPolicy: 'cache-and-network',
23+
},
24+
},
25+
// Observation de l'Ă©tat de chargement pour toutes les requĂȘtes
26+
// Consultez 'RequĂȘtes intelligentes > options > watchLoading' pour plus de dĂ©tails
27+
watchLoading (isLoading, countModifier) {
28+
loading += countModifier
29+
console.log('Global loading', loading, countModifier)
30+
},
31+
// Gestion globale des erreurs pour toutes les requĂȘtes intelligentes et les souscriptions
32+
errorHandler (error) {
33+
console.log('Gestion globale des erreurs')
34+
console.error(error)
35+
},
36+
// DĂ©sactivation globale de la prĂ©-requĂȘte lors du rendu cĂŽtĂ© serveur (SSR)
37+
prefetch: Boolean,
38+
})
39+
```
40+
41+
Vous pouvez utiliser le provider Apollo dans votre application Vue :
42+
43+
```js
44+
new Vue({
45+
el: '#app',
46+
apolloProvider,
47+
render: h => h(App),
48+
})
49+
```

Diff for: ‎packages/docs/src/fr/api/apollo-query.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Composant ApolloQuery
2+
3+
Exemple :
4+
5+
```vue
6+
<ApolloQuery
7+
:query="gql => gql`
8+
query MyHelloQuery ($name: String!) {
9+
hello (name: $name)
10+
}
11+
`"
12+
:variables="{ name }"
13+
>
14+
<template v-slot="{ result: { error, data }, isLoading }">
15+
<!-- Chargement -->
16+
<div v-if="isLoading" class="loading apollo">Chargement...</div>
17+
18+
<!-- Erreur -->
19+
<div v-else-if="error" class="error apollo">Une erreur est survenue.</div>
20+
21+
<!-- RĂ©sultat -->
22+
<div v-else-if="data" class="result apollo">{{ data.hello }}</div>
23+
24+
<!-- Pas de résultat -->
25+
<div v-else class="no-result apollo">Pas de résultat :(</div>
26+
</template>
27+
</ApolloQuery>
28+
```
29+
30+
::: warning
31+
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).
32+
:::
33+
34+
## Props
35+
36+
- `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
37+
- `variables`: objet de variables GraphQL
38+
- `fetchPolicy`: consultez [l'option `fetchPolicy` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
39+
- `pollInterval`: consultez [l'option `pollInterval` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
40+
- `notifyOnNetworkStatusChange`: consultez [l'option `notifyOnNetworkStatusChange` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
41+
- `context`: consultez [l'option `context` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#options)
42+
- `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"`
43+
- `skip`: un boolĂ©en qui dĂ©sative le requĂȘtage
44+
- `clientId`: l'identifiant du client Apollo utilisĂ© par la requĂȘte (dĂ©fini dans l'option `clients` d'ApolloProvider)
45+
- `deep`: booléen pour permettre l'utilisation d'observateurs Vue imbriqués
46+
- `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
47+
- `debounce`: nombre de millisecondes pour stabiliser les nouvelles requĂȘtes (par exemple quand les variables changent)
48+
- `throttle`: nombre de millisecondes pour rĂ©guler les nouvelles requĂȘtes (par exemple quand les variables changent)
49+
- `prefetch`: si `false`, pas de prĂ©-requĂȘte lors du rendu cĂŽtĂ© serveur (SSR)
50+
- `options`: autres options Apollo Watch Query
51+
52+
## Slots avec portée
53+
54+
- `result`: résulta Apollo Query
55+
- `result.data`: donnĂ©e retournĂ©e par la requĂȘte (peut ĂȘtre transformĂ©e dans la prop `update`)
56+
- `result.fullData`: donnĂ©e brute retournĂ©e par la requĂȘte (non transformĂ©e dans la prop `update`)
57+
- `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)
58+
- `result.error`: erreur évntuelle pour le résultat en cours
59+
- `result.networkStatus`: consultez [l'option `networkStatus` d'Apollo](https://www.apollographql.com/docs/react/data/queries/#result)
60+
- `query`: requĂȘte intelligente associĂ©e au composant. C'est pratique pour exĂ©cuter certaines opĂ©rations comme `query.refetch` ou bien `query.fetchMore`.
61+
- `isLoading`: Ă©tat de chargement de la requĂȘte intelligente
62+
- `gqlError`: la premiĂšre erreur GraphQL Ă©vntuelle
63+
- `times`: combien de fois le résultat a été mis à jour
64+
65+
## ÉvĂ©nements
66+
67+
- `result(resultObject)`
68+
- `error(errorObject)`
69+
- `loading(boolean)`

0 commit comments

Comments
 (0)