Leçon 18 : Interagir avec des services externes via des webhooks

Un webhook est une fonction de rappel basée sur HTTP qu'un service externe appelle pour notifier d'un événement, en transmettant un payload de données avec lui. Les webhooks permettent à différentes applications web et services de communiquer entre eux.

Voici quelques exemples de services qui invoquent des webhooks :

• GitHub, lorsqu'un commit est poussé dans un dépôt
• Dropbox, lorsqu'un document est mis à jour
• WooCommerce, lorsqu'une commande est ajoutée
• Microsoft Teams, pour recevoir des messages en texte enrichi et les publier dans des canaux publics
• ConvertKit, lorsqu'un abonné est activé

Avec Gato GraphQL, nous pouvons créer des Persisted Queries qui agissent comme des webhooks :

• Parce que la Persisted Query est exposée sous sa propre URL, elle peut être utilisée comme cible du webhook
• Chaque Persisted Query peut traiter exclusivement d'un webhook spécifique

Dans cette leçon du tutoriel, nous allons créer une Persisted Query pour interagir avec ConvertKit.

​

Consulter la documentation du webhook

La première étape consiste à lire la documentation du site web et à comprendre quelles données sont envoyées via le payload.

En analysant les webhooks dans ConvertKit, les événements liés aux abonnés envoient une requête POST à notre URL avec un payload JSON comme celui-ci :

{
  "subscriber": {
    "id": 1,
    "first_name": "John",
    "email_address": "John@example.com",
    "state": "active",
    "created_at": "2018-02-15T19:40:24.913Z",
    "fields": {
      "My Custom Field": "Value"
    }
  }
}Copy

​

Extraire les données du payload

Comme la requête est envoyée via POST, nous devons extraire les données du corps de la requête HTTP (ce qui est pris en charge via l'extension HTTP Request via Schema).

Cette requête GraphQL récupère le corps de la requête et le convertit en objet JSON. Ensuite, elle extrait les éléments "subscriber.first_name" et "subscriber.email_address" de l'objet JSON, et les exporte en tant que variables dynamiques :

query ExtractPayloadData {
  body: _httpRequestBody
  bodyJSONObject: _strDecodeJSONObject(string: $__body)
 
  subscriberFirstName: _objectProperty(
    object: $__bodyJSONObject,
    by: { path: "subscriber.first_name" }
  )
    @export(as: "subscriberFirstName")
  
  subscriberEmail: _objectProperty(
    object: $__bodyJSONObject,
    by: { path: "subscriber.email_address" }
  )
    @export(as: "subscriberEmail")
}Copy

​

Exécuter une action avec les données

Une fois les données extraites du payload, nous pouvons exécuter une action avec elles.

Cette requête GraphQL traite l'événement subscriber.subscriber_unsubscribe, pour envoyer un e-mail à la personne qui s'est désabonnée, en lui demandant son avis.

query CreateEmailMessage
  @depends(on: "ExtractPayloadData")
{
  emailMessageTemplate: _strConvertMarkdownToHTML(
    text: """
 
Hey {$subscriberFirstName}, it's sad to let you go!
 
Please be welcome to complete [this form](https://forms.gle/FpXNromWAsZYC1zB8) and let us know if there is anything we can do better.
 
Thanks. Hope to see you back!
 
    """
  )
  emailMessage: _strReplaceMultiple(
    search: ["{$subscriberFirstName}"],
    replaceWith: [$subscriberFirstName],
    in: $__emailMessageTemplate
  )
    @export(as: "emailMessage")
}
 
mutation SendEmail @depends(on: "CreateEmailMessage") {
  _sendEmail(
    input: {
      to: $subscriberEmail
      subject: "Would you like to give us feedback on how we can improve?"
      messageAs: {
        html: $emailMessage
      }
    }
  ) {
    status
  }
}Copy