Nouveau : Datasets open source gratuits disponibles !Decouvrir →
◻️
data 20 entrees

GraphQL Cheatsheet

Découvrez notre cheatsheet complète GraphQL : les requêtes, mutations, types de données, variables... Toutes les informations pour maîtriser ce protocole e

## Bases & syntaxe
### Déclaration d'un schéma GraphQL
```graphql
type Query {
  hello: String
}

Définit la structure des requêtes disponibles.

Résolution de champs

const resolvers = {
  Query: {
    hello: () => 'Hello world!'
  }
};

Implémente les logiques pour chaque champ du schéma.

Structures de données

Types complexes

type User {
  id: ID!
  name: String!
  age: Int
}

Définit des types qui peuvent contenir plusieurs champs.

Union et Interface

union SearchResult = User | Product

interface Named {
  name: String!
}

type User implements Named {
  id: ID!
  name: String!
}

Permet la polyvalence et l'implémentation de contrats.

Fonctions & methodes essentielles

Mutation

mutation createUser($name: String!, $age: Int!) {
  createUser(name: $name, age: $age) {
    id
    name
    age
  }
}

Modifie les données sur le serveur.

Subscriptions

const pubsub = new PubSub();
pubsub.publish('NEW_USER', { newUser });

app.use('/graphql', bodyParser.json(), expressGraphQL({
  schema,
  rootValue: {
    subscription: pubsub.asyncIterator(['NEW_USER'])
  }
}));

Permet aux clients de recevoir des mises à jour en temps réel.

Patterns courants

Pagination

type Query {
  users(page: Int, limit: Int): [User]
}

Implémente la pagination pour les listes de données.

Filtrage et tri

type Query {
  users(ageMin: Int, ageMax: Int, orderBy: String): [User]
}

Permet aux utilisateurs de filtrer et d'ordonner les résultats.

Opérations avancées

Fragments

fragment UserFields on User {
  id
  name
}

query GetUsers {
  users {
    ...UserFields
  }
}

Réutilise des parties communes dans des requêtes complexes.

Aliases

query GetUser {
  me: user(id: "123") {
    name
  }
}

Permet de renommer les champs pour éviter les conflits.

Debugging & outils

Inspecteur de schéma

  • Utiliser l'inspecteur de schéma en ligne

Permet de visualiser et d'explorer le schéma GraphQL.

GraphiQL

app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql'
}));

Interface interactive pour tester les requêtes GraphQL directement dans le navigateur.


Projet GraphQL a lancer ?

Besoin d'aide sur un projet ? Decrivez-le pour des conseils personnalises.

Recevoir des conseils

Questions frequentes

A quoi sert cette cheatsheet GraphQL ?
Cette cheatsheet GraphQL regroupe la syntaxe, les commandes et les astuces essentielles pour GraphQL. Elle est concue pour servir d'aide-memoire rapide, que vous soyez debutant ou developpeur confirme cherchant une reference rapide.
Comment utiliser cette cheatsheet GraphQL ?
Parcourez les sections pour trouver la syntaxe ou la commande dont vous avez besoin. Vous pouvez la garder ouverte dans un onglet pendant que vous codez, ou la copier dans vos notes pour un acces hors ligne.
Cette cheatsheet est-elle a jour ?
Oui, nos cheatsheets sont regulierement mises a jour pour refleter les dernieres versions et bonnes pratiques de GraphQL. Si vous remarquez une information obsolete, n'hesitez pas a nous contacter.

Pages liees

Chaque semaine, le meilleur de la tech francaise

Tendances, salaires, outils et opportunites — directement dans votre boite mail.

Gratuit. Desabonnement en un clic. Pas de spam.