Logo
Blog

👨🏻‍🏫 GraphQL query để tự động gửi người đăng ký newsletter từ InstaWP sang Mailchimp

Leonardo Losoviz
Bởi Leonardo Losoviz ·

(Đọc bài viết blog 🚀 Tự động gửi người đăng ký newsletter từ InstaWP sang Mailchimp để xem bối cảnh của query này.)

GraphQL query này thu thập email của những khách truy cập đã tích vào ô "Subscribe to mailing list" trong InstaWP (khi tạo một trang sandbox mới), và đăng ký email đó vào một danh sách Mailchimp:

query HasSubscribedToNewsletter {
  hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin")
  subscriberOptIn: _httpRequestStringParam(name: "marketing_optin")
  isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA")
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    @export(as: "subscribedToNewsletter")
}
 
query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  subscriberEmail: _httpRequestStringParam(name: "email")
  
  mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME")
    @remove
  mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD")
    @remove
  
  mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: {
    url: "https://us7.api.mailchimp.com/3.0/lists/{listCode}/members",
    method: POST,
    options: {
      auth: {
        username: $__mailchimpUsername,
        password: $__mailchimpPassword
      },
      json: {
        email_address: $__subscriberEmail,
        status: "subscribed"
      }
    }
  })
}

Ngoài ra, bạn cũng có thể đăng ký người đăng ký vào plugin newsletter WordPress của mình (ví dụ: Noptin hoặc plugin khác).

Hãy cùng xem GraphQL query này thực hiện điều kỳ diệu như thế nào.

Tách GraphQL query thành các đơn vị độc lập

Một tài liệu GraphQL có thể chứa nhiều operation (queries và mutations), nhưng chỉ một trong số đó sẽ được thực thi. Chúng ta chỉ định operation nào thông qua tham số ?operationName=... trên GraphQL endpoint; nếu không, operation cuối cùng sẽ được thực thi.

Lưu ý rằng có 2 operation query trong tài liệu trên:

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

URL webhook chứa ?operationName=MaybeCreateContactOnMailchimp, do đó đây là operation sẽ được thực thi.

Nhờ extension Multiple Query Execution, MaybeCreateContactOnMailchimp sẽ thực thi HasSubscribedToNewsletter trước, như được chỉ định qua directive @depends:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   # ...
{
  #
}

Ngoài ra, MaybeCreateContactOnMailchimp sẽ được thực thi có điều kiện, chỉ khi giá trị của biến $subscribedToNewsletter là true:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  #
}

$subscribedToNewsletter là một biến động, được xuất trong operation HasSubscribedToNewsletter:

query HasSubscribedToNewsletter {
  # ...
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    @export(as: "subscribedToNewsletter")
}

Do đó, operation MaybeCreateContactOnMailchimp sẽ chỉ được thực thi khi người dùng đã tích vào ô "Subscribe to mailing list".

Tính toán xem người dùng có tích vào ô không

Tài liệu webhook của InstaWP cho biết dữ liệu payload chứa các trường sau (trong số các trường khác):

  • marketing_optin: Cho biết người dùng có tích vào ô không
  • email: Email của khách truy cập

Tài liệu chỉ giải thích rằng trường marketing_optin có giá trị NA khi ô không được tích, vì vậy chúng ta phải làm việc với điều đó.

Để biết người dùng có tích vào ô không, logic là:

  • Kiểm tra xem trường marketing_optin có tồn tại không, và
  • Kiểm tra rằng giá trị của nó không phải là NA

Điều này được tính toán trong operation HasSubscribedToNewsletter. Đây là operation kèm chú thích, giải thích từng dòng trong query đang làm gì:

query HasSubscribedToNewsletter {
 
  # Check if field `marketing_optin` is present
  hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin")
 
  # Get the value of field `marketing_optin`
  subscriberOptIn: _httpRequestStringParam(name: "marketing_optin")
 
  # Check if the value of the field is not "NA"
  isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA")
 
  # Perform an AND operation: field present && value != "NA"
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    
    # Export the result under dynamic variable $subscribedToNewsletter
    @export(as: "subscribedToNewsletter")
}

Có một số điều thú vị trong query này.

Global Fields

Bạn có chú ý đến các field bắt đầu bằng _ không? Cụ thể:

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

Đây là global fields, tức là các field có sẵn trong tất cả các type trong GraphQL schema. Global fields cung cấp chức năng thay vì dữ liệu, và theo quy ước chúng bắt đầu bằng _.

Field to Input

Bạn có chú ý đến những biến bắt đầu bằng $__ không? Cụ thể:

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

Đây là các biến động chứa giá trị của một field được định nghĩa trước chúng trong cùng một operation. Ví dụ, biến $__subscriberOptIn chứa giá trị của field subscriberOptIn được khai báo trước nó.

Đây là tính năng được cung cấp bởi extension Field to Input, cho phép sử dụng đầu ra của một field làm đầu vào cho field khác. Đây là cách chúng ta có thể tạo ra chức năng trong GraphQL query.

Trong query, field isNotSubscriberOptInNAValue kiểm tra rằng giá trị của field subscriberOptIn đã được queries trước đó không bằng "NA", và subscribedToNewsletter tính toán phép toán AND liên quan đến các giá trị của field hasSubscriberOptIn và isNotSubscriberOptInNAValue.

Kết nối với Mailchimp

Operation MaybeCreateContactOnMailchimp chứa logic để trích xuất dữ liệu payload và gọi Mailchimp API để đăng ký email vào danh sách newsletter.

Đây là operation kèm chú thích, giải thích từng dòng đang làm gì:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  # Extract form field `email` from the body of the request
  subscriberEmail: _httpRequestStringParam(name: "email")
  
  # Obtain Mailchimp credentials, defined in wp-config.php
  mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME")
    # Do not print the credentials in the response
    @remove
  mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD")
    @remove
  
  # Connect to Mailchimp to add a new member to the list
  mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: {
    url: "https://us7.api.mailchimp.com/3.0/lists/{listCode}/members",
    method: POST,
    options: {
      # Provide credentials to connect to the API
      auth: {
        username: $__mailchimpUsername,
        password: $__mailchimpPassword
      },
      # Provide form data
      json: {
        email_address: $__subscriberEmail,
        status: "subscribed"
      }
    }
  })
}

Hãy cùng khám phá các tính năng được sử dụng trong query này.

Biến Môi Trường

Chúng ta cần cung cấp thông tin xác thực khi kết nối với Mailchimp API. Tuy nhiên, chúng ta không muốn nhập trực tiếp vào GraphQL query, vì chúng có thể bị rò rỉ ở đâu đó (ví dụ: chúng có thể được in trong một số log).

Đó là lý do tại sao chúng ta sử dụng global field _env (được cung cấp bởi extension PHP Constants and Environment via Schema) để đọc biến môi trường hoặc hằng số PHP, cùng với directive @remove (được cung cấp bởi extension Field Response Removal) để bỏ qua việc in thông tin xác thực trong response.

Bây giờ, chúng ta có thể khai báo thông tin xác thực trong wp-config.php:

define( 'MAILCHIMP_API_CREDENTIALS_USERNAME', '{ username }' );
define( 'MAILCHIMP_API_CREDENTIALS_PASSWORD', '{ password }' );

Gửi HTTP Request đến Mailchimp

Phần cuối cùng của logic là field _sendJSONObjectItemHTTPRequest, gửi HTTP request đến một dịch vụ.

Vì chúng ta muốn kết nối với Mailchimp API, field mailchimpListMembersJSONObject cung cấp dữ liệu theo yêu cầu của REST API endpoint của Mailchimp, như được chỉ dẫn trong tài liệu để đăng ký thành viên vào danh sách Mailchimp:

  • Gửi request POST
  • Endpoint là https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • Body phải bao gồm các trường email_address và status

Tạo webhook để tương tác với bất kỳ API nào

GraphQL query trong bài viết này chuyển tiếp dữ liệu từ InstaWP sang Mailchimp.

Bạn có thể áp dụng ý tưởng tương tự cho bất kỳ sự kết hợp nào bạn cần, trích xuất dữ liệu từ một dịch vụ nguồn (bất kỳ dịch vụ nào), điều chỉnh nó và gửi đến một dịch vụ đích (bất kỳ dịch vụ nào).

Chúc vui vẻ!

Quay lại tất cả bài viết

Đăng ký nhận bản tin của chúng tôi

Cập nhật tất cả những điều mới từ Gato GraphQL.