GraphQL

basics

Queries, Mutations and Subscriptions

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

Au niveau du back-end

  1. Définition des modèles de la BDD
  2. Définition du schéma de donnée GraphQL
  3. Déclaration des resolvers

Exemple de Schéma : https://github.com/xavierlefevre/chat/blob/master/server/data/schema.js

Exemple de Resolvers : https://github.com/xavierlefevre/chat/blob/master/server/data/resolvers.js

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

GraphQL

basics

Merci

GraphQL

basics

Sources

  • https://blog.risingstack.com/graphql-overview-getting-started-with-graphql-and-nodejs/
  • https://www.quora.com/What-is-GraphQL
  • https://www.tutorialspoint.com/restful/restful_introduction.htm
  • http://163.172.157.10/graphiql
  • http://graphql.org/blog/graphql-a-query-language/
  • https://www.codazen.com/choosing-graphql-client-apollo-vs-relay/
Made with Slides.com