Pelajaran 18: Berinteraksi dengan layanan eksternal melalui webhooks

Webhook adalah fungsi callback berbasis HTTP yang dipanggil oleh layanan eksternal untuk memberi tahu suatu peristiwa, dengan menyertakan payload data bersamanya. Webhook memungkinkan berbagai webapp dan layanan untuk saling berkomunikasi.

Beberapa contoh layanan yang memanggil webhook meliputi:

• GitHub, saat sebuah repositori menerima push commit
• Dropbox, saat sebuah dokumen diperbarui
• WooCommerce, saat sebuah pesanan ditambahkan
• Microsoft Teams, untuk menerima pesan teks kaya dan memposting di saluran publik
• ConvertKit, saat seorang pelanggan diaktifkan

Dengan Gato GraphQL, kita dapat membuat Persisted Queries yang berfungsi sebagai webhook:

• Karena Persisted Query diekspos di bawah URL-nya sendiri, URL tersebut dapat digunakan sebagai target untuk webhook
• Setiap Persisted Query dapat menangani secara eksklusif suatu webhook tertentu

Dalam pelajaran tutorial ini, kita akan membuat Persisted Query untuk berinteraksi dengan ConvertKit.

​

Menelusuri dokumentasi webhook

Langkah pertama adalah membaca dokumentasi untuk situs web tersebut, dan memahami data apa yang dikirim melalui payload.

Dengan menganalisis webhooks di ConvertKit, peristiwa terkait pelanggan mengirimkan permintaan POST ke URL kita dengan payload JSON seperti ini:

{
  "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

​

Mengekstrak data dari payload

Karena permintaan dikirim melalui POST, kita harus mengekstrak data dari body permintaan HTTP (yang didukung melalui ekstensi HTTP Request via Schema).

Query GraphQL ini mengambil body permintaan dan mengonversinya menjadi objek JSON. Kemudian mengekstrak item "subscriber.first_name" dan "subscriber.email_address" dari objek JSON tersebut, dan mengekspornya sebagai variabel dinamis:

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

​

Menjalankan aksi dengan data

Setelah kita mengekstrak data dari payload, kita dapat menjalankan suatu aksi dengan data tersebut.

Query GraphQL ini menangani peristiwa subscriber.subscriber_unsubscribe, untuk mengirim email kepada orang yang berhenti berlangganan, meminta umpan balik.

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