GraphQL

basics

C'est quoi ?

• GraphQL est un langage de requête pour vos APIs créé par Facebook en 2012
• Son objectif est de construire et d'exposer un graph représentant la donnée de votre application
• Ces requêtes portent le nom de "client‐specified queries"
• Ce langage nécessite un "server-side runtime" pour traduire la requête auprès du serveur et construire la donnée à renvoyer
• GraphQL prend la place d'une architecture REST

GraphQL

basics

Comment ça marche ?

Client

Serveur

PSQL

Express

GraphQL

Apollo Client

React Native / Redux

Request (String)

Response

(JSON)

GraphQL

basics

Req/Res REST

GET /users/1 and GET /users/1/friends

GET /users/1?include=friends.username

• Hors documentation, la requête n'est pas facilement trouvable
• Hors documentation, la forme de la réponse n'est connue qu'après avoir query le back-end

• Le front n'a pas forcément besoin de toutes les informations renvoyées

Or

// Réponse
{
  "user": {
    "id": 1,
    "email": "son-goku@capsule-corp.com",
    "username": "SonGoku",
    "powerLevel": 1500000000,
    "friends": [
      {
        "id": 2,
        "username": "Piccolo",
        "email": "piccolo@deamon.com",
        "powerLevel": 18000,
      },
      {
        "id": 5,
        "username": "SonGoten",
        "email": "son-goten@edu-univ.com",
        "powerLevel": 1200000000,
      }
    ]
  }
}

GraphQL

basics

Req/Res GQL

• L'API renvoie la donnée sous la même forme que celle de la requête

// Requête
{
  user(id: 1) {
    email
    username
    friends {
      id
      username
    }
  }
}

// Réponse
{
  "data": {
    "user": {
      "email": "son-goku@capsule-corp.com",
      "username": "SonGoku",
      "friends": [
        {
          "id": 2,
          "username": "Piccolo"
        },
        {
          "id": 5,
          "username": "SonGoten"
        }
      ]
    }
  }
}

GraphQL

basics

Avantages et Inconvénients

• Ne requête que ce qui est nécessaire
• ​Requêtes hiérarchiques et récursives
• Fort typing
• Version free
• Peut être mis en parallèle à du REST
• Auto documenté

• Sécurité ?

+

-

GraphQL

basics

Queries

// Query
{
  user(id: 1) {
    email
    username
    friends {
      id
      username
    }
  }
}

Exemple de Query : https://github.com/xavierlefevre/chat/blob/master/client/src/graphql/groups/group.query.js

GraphQL

basics

Mutations

// Mutation
mutation createMessage {
  createMessage(text: "kamehameha", groupId: 1) {
    id
    to {
      id
    }
    from {
      id
      username
    }
    createdAt
    text
  }
}

Exemple de Mutation : https://github.com/xavierlefevre/chat/blob/master/client/src/graphql/groups/create-group.mutation.js

GraphQL

basics

Subscriptions

// Subscription
subscription onGroupAdded {
  groupAdded(userId: 1){
    id
    name
    messages(limit: 1) {
      id
      to {
        id
      }
      from {
        id
        username
      }
      createdAt
      text
    }
  }
}

Exemple de Souscription : https://github.com/xavierlefevre/chat/blob/master/client/src/graphql/groups/group-added.subscription.js