Process Utilisateurs

Cette fiche décrit le parcours complet pour intégrer la brique Utilisateurs dans votre application : de la recherche paginée jusqu'à l'affichage d'un profil enrichi, en passant par la gestion des erreurs courantes.

Cas d'usage guide : un écran de gestion RH qui permet à un manager de retrouver un collaborateur, consulter ses infos, et basculer vers les publications / demandes associées. Tous les exemples ci-dessous sont exécutables en direct.

Vue d'ensemble du flux

┌──────────────┐   1. search   ┌─────────────┐   2. select   ┌──────────────┐
│ Liste UI     │ ────────────▶ │ users(...)  │ ────────────▶ │ user(id)     │
│ (paginée)    │               │ paginée     │               │ + relations  │
└──────────────┘               └─────────────┘               └──────┬───────┘
                                                                    │ 3. drill
                                                                    ▼
                                                           ┌──────────────┐
                                                           │ posts/todos  │
                                                           │ albums (lazy)│
                                                           └──────────────┘

Trois étapes, trois bonnes pratiques :

1. Lister avec une pagination — ne jamais charger la liste complète.
2. Afficher le détail en un seul appel — regrouper les champs utiles.
3. Charger les relations à la demande, rarement en même temps que l'étape 2.

Étape 1 — Recherche paginée

Toujours passer par options.paginate : le backend impose une limite stricte (100) et renverra une erreur si on l'omet sur des gros volumes.

▶ EssayerListe + total

5 premiers utilisateurs. Le champ meta.totalCount alimente la pagination UI.

Query

query ListUsers($page: Int = 1, $limit: Int = 5) { users(options: { paginate: { page: $page, limit: $limit } }) { data { id name email company { name } } meta { totalCount } } }

Variables

Réponse

Cliquez sur Exécuter pour lancer la requête.

Pagination — règle d'or

Limit	Cas d'usage	Performance attendue
5 – 10	Autocomplétion, liste déroulante	< 50 ms
20 – 50	Tableau standard	< 200 ms
100	Export / synchro batch	< 1 s
> 100	❌ refusé — utiliser un curseur batch

astuce

Pour un export, préférez plusieurs pages de 100 à une requête massive — l'API tolère mieux les petits lots et vous gardez la main sur les erreurs partielles.

Étape 2 — Fiche détail

Regrouper dans une seule requête les champs affichés sur l'écran profil. Chaque champ inutilisé côté UI est un coût inutile côté backend.

▶ EssayerDétail + adresse

Profil complet avec l'adresse aplatie. À adapter à votre formulaire.

Query

query UserDetail($id: ID!) { user(id: $id) { id name email phone website address { city street zipcode } } }

Variables

Réponse

Cliquez sur Exécuter pour lancer la requête.

Pièges courants

• id: "0" renvoie null sans erreur — traiter le retour nul côté client.
• address peut être partiellement renseigné : chaque sous-champ est optionnel. Toujours vérifier côté UI avant concaténation.

Étape 3 — Relations à la demande

Charger posts / todos / albums seulement quand l'utilisateur ouvre l'onglet correspondant. Le type PostsPage est paginé — même règle d'or que l'étape 1.

▶ EssayerPosts d'un utilisateur (lazy)

À déclencher uniquement lorsque l'onglet Posts devient actif.

Query

query UserPosts($id: ID!, $page: Int = 1, $limit: Int = 5) { user(id: $id) { posts(options: { paginate: { page: $page, limit: $limit } }) { data { id title } meta { totalCount } } } }

Variables

Réponse

Cliquez sur Exécuter pour lancer la requête.

Aller plus loin

Une fois le process maîtrisé, ouvrez le playground pour composer vos propres requêtes — autocomplétion, validation et documentation inline, le tout au même endroit.

⚡ IDE intégréPlayground Utilisateurs

Point de départ : la query de listing. Explorez le schéma via le panneau Docs à gauche.

Chargement de GraphiQL...

Voir aussi

• Process Posts — cycle de vie du contenu, lié à un User
• Hub API — fiches, queries, mutations et types sur une seule vue