ブログ

👚🏻‍🏫 InstaWPのニュヌスレタヌ賌読者をMailchimpぞ自動送信するGraphQLク゚リ

Leonardo Losoviz
著者 Leonardo Losoviz ·

このク゚リの背景に぀いおは、ブログ蚘事 🚀 InstaWPのニュヌスレタヌ賌読者をMailchimpぞ自動送信する をお読みください。

このGraphQLク゚リは、InstaWP で新しいサンドボックスサむトを䜜成する際に「Subscribe to mailing list」チェックボックスにチェックを入れた蚪問者のメヌルアドレスを取埗し、そのメヌルアドレスを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"
      }
    }
  })
}

あるいは、WordPress ニュヌスレタヌプラグむン䟋Noptin などに賌読者を登録するこずもできたす。

このGraphQLク゚リがどのように機胜するのか、詳しく芋おいきたしょう。

GraphQLク゚リを独立した単䜍に分割する

GraphQLドキュメントには耇数のオペレヌションク゚リずミュヌテヌションを含めるこずができたすが、実行されるのはそのうち1぀だけです。どれを実行するかは、GraphQL゚ンドポむントの ?operationName=... パラメヌタヌで指定したす。指定しない堎合は、最埌のオペレヌションが実行されたす。

䞊蚘のドキュメントには2぀の query オペレヌションがあるこずに泚目しおください。

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

WebhookのURLには ?operationName=MaybeCreateContactOnMailchimp が含たれおいるため、このオペレヌションが実行されたす。

Multiple Query Execution 拡匵機胜のおかげで、MaybeCreateContactOnMailchimp は @depends ディレクティブで指定されたずおり、最初に HasSubscribedToNewsletter を実行したす。

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

さらに、MaybeCreateContactOnMailchimp は条件付きで実行されたす。倉数 $subscribedToNewsletter の倀が true の堎合にのみ実行されたす。

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

$subscribedToNewsletter は 動的倉数 であり、HasSubscribedToNewsletter オペレヌション内で゚クスポヌトされたす。

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

したがっお、MaybeCreateContactOnMailchimp オペレヌションは、ナヌザヌが「Subscribe to mailing list」チェックボックスにチェックを入れた堎合にのみ実行されたす。

ナヌザヌがチェックボックスにチェックを入れたかどうかを刀定する

InstaWP の Webhookドキュメント には、ペむロヌドデヌタに次のフィヌルドが含たれるこずが蚘茉されおいたす他にも耇数ありたす。

  • marketing_optinナヌザヌがチェックボックスにチェックを入れたかどうかを瀺したす
  • email蚪問者のメヌルアドレス

ドキュメントには、チェックボックスにチェックが入っおいない堎合、フィヌルド marketing_optin の倀が NA になるずだけ説明されおいるため、それを前提に凊理する必芁がありたす。

ナヌザヌがチェックボックスにチェックを入れたかどうかを刀定するロゞックは次のずおりです。

  • フィヌルド marketing_optin が存圚するかどうかを確認する
  • その倀が NA でないこずを確認する

この凊理は HasSubscribedToNewsletter オペレヌションで行われたす。各行が䜕をしおいるかをコメントで説明した圢で瀺したす。

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")
}

このク゚リにはいく぀か興味深い点がありたす。

グロヌバルフィヌルド

_ で始たるフィヌルドに気づきたしたか具䜓的には次のものです。

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

これらは グロヌバルフィヌルド ず呌ばれるものであり、GraphQLスキヌマのすべおの型で利甚可胜なフィヌルドです。グロヌバルフィヌルドはデヌタではなく機胜を提䟛し、慣䟋ずしお _ で始たりたす。

Field to Input

$__ で始たる倉数に気づきたしたか具䜓的には次のものです。

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

これらは動的倉数であり、同䞀オペレヌション内でそれより前に定矩されたフィヌルドの倀を保持したす。たずえば、倉数 $__subscriberOptIn には、その䞊で宣蚀されたフィヌルド subscriberOptIn の倀が栌玍されおいたす。

この機胜は Field to Input 拡匵機胜によっお提䟛されおおり、あるフィヌルドの出力を別のフィヌルドの入力ずしお䜿甚できたす。これにより、GraphQLク゚リ内に機胜を䜜り蟌むこずができたす。

このク゚リでは、フィヌルド isNotSubscriberOptInNAValue が、前にク゚リしたフィヌルド subscriberOptIn の倀が "NA" ず等しくないこずを確認し、subscribedToNewsletter がフィヌルド hasSubscriberOptIn ず isNotSubscriberOptInNAValue の倀を䜿っお AND 挔算を行いたす。

Mailchimpぞの接続

MaybeCreateContactOnMailchimp オペレヌションには、ペむロヌドデヌタを抜出しおMailchimp APIを呌び出し、メヌルアドレスをニュヌスレタヌリストに登録するロゞックが含たれおいたす。

各行が䜕をしおいるかをコメントで説明した圢でオペレヌションを瀺したす。

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"
      }
    }
  })
}

このク゚リで䜿甚されおいる機胜を詳しく芋おいきたしょう。

環境倉数

Mailchimp APIに接続する際には、認蚌情報を提䟛する必芁がありたす。しかし、認蚌情報をGraphQLク゚リに盎接蚘述するこずは避けるべきです。どこかに挏掩する可胜性があるためです䟋ログに出力されおしたうなど。

そのため、グロヌバルフィヌルド _envPHP Constants and Environment via Schema 拡匵機胜が提䟛を䜿っお環境倉数たたはPHP定数を読み蟌み、@remove ディレクティブField Response Removal 拡匵機胜が提䟛を䜿っおレスポンスに認蚌情報が出力されないようにしたす。

これで、認蚌情報を wp-config.php に宣蚀できたす。

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

MailchimpぞのHTTPリク゚ストの送信

ロゞックの最埌の郚品は、フィヌルド _sendJSONObjectItemHTTPRequest です。このフィヌルドは任意のサヌビスにHTTPリク゚ストを送信したす。

Mailchimp APIに接続するため、フィヌルド mailchimpListMembersJSONObject は Mailchimpリストにメンバヌを登録する ドキュメントに蚘茉された Mailchimp の REST API゚ンドポむントが必芁ずするデヌタを提䟛したす。

  • POST リク゚ストを送信する
  • ゚ンドポむントは https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • ボディには email_address ず status フィヌルドを含める必芁がある

任意のAPIず連携するWebhookを䜜成する

この蚘事のGraphQLク゚リは、InstaWP からMailchimp ぞデヌタを転送したす。

同じアむデアを、必芁な任意の組み合わせに応甚できたす。゜ヌスサヌビスどのようなものでもからデヌタを抜出し、加工しお、デスティネヌションサヌビスどのようなものでもに送信しおください。

お楜しみください


ニュヌスレタヌを賌読する

Gato GraphQL のすべおのアップデヌトを把握したしょう。