Logo
Blog

👨🏻‍🏫 GraphQL query om nieuwsbriefabonnees automatisch van InstaWP naar Mailchimp te sturen

Leonardo Losoviz
Door Leonardo Losoviz ·

(Lees de blogpost 🚀 Nieuwsbriefabonnees automatisch van InstaWP naar Mailchimp sturen voor de context van deze query.)

Deze GraphQL query legt het e-mailadres vast van bezoekers die het vakje "Subscribe to mailing list" in InstaWP hebben aangevinkt (bij het aanmaken van een nieuwe sandbox-site), en schrijft dit e-mailadres in op een Mailchimp-lijst:

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

Je kunt abonnees ook registreren in je WordPress-nieuwsbriefplug-in (bijv. Noptin of een andere).

Laten we bekijken hoe deze GraphQL query zijn magie doet.

De GraphQL query opdelen in onafhankelijke eenheden

Een GraphQL-document kan meerdere operaties bevatten (queries en mutations), maar slechts één ervan wordt uitgevoerd. Je geeft aan welke via de parameter ?operationName=... op het GraphQL-eindpunt; anders wordt de laatste operatie uitgevoerd.

Let op: in het bovenstaande document staan 2 query-operaties:

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

De webhook-URL bevat ?operationName=MaybeCreateContactOnMailchimp, dus dat is de operatie die wordt uitgevoerd.

Dankzij de extensie Multiple Query Execution zal MaybeCreateContactOnMailchimp eerst HasSubscribedToNewsletter uitvoeren, zoals aangegeven via de @depends-directive:

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

Bovendien wordt MaybeCreateContactOnMailchimp alleen conditioneel uitgevoerd, en wel alleen als de waarde van variabele $subscribedToNewsletter true is:

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

$subscribedToNewsletter is een dynamische variabele, geëxporteerd binnen de operatie HasSubscribedToNewsletter:

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

Operatie MaybeCreateContactOnMailchimp wordt dus alleen uitgevoerd wanneer de gebruiker het vakje "Subscribe to mailing list" heeft aangevinkt.

Berekenen of de gebruiker het vakje heeft aangevinkt

De documentatie van de webhook van InstaWP geeft aan dat de payload-gegevens de volgende velden bevatten (onder andere):

  • marketing_optin: Geeft aan of de gebruiker het vakje heeft aangevinkt
  • email: E-mailadres van de bezoeker

De documentatie legt alleen uit dat veld marketing_optin de waarde NA heeft wanneer het vakje niet is aangevinkt, dus daarmee moeten we werken.

Om te bepalen of de gebruiker het vakje heeft aangevinkt, is de logica als volgt:

  • Controleer of veld marketing_optin aanwezig is, en
  • Controleer of de waarde ervan niet NA is

Dit wordt berekend in de operatie HasSubscribedToNewsletter. Hier is ze met commentaar dat uitlegt wat elke regel in de query doet:

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

Er zijn een paar interessante dingen in deze query.

Globale velden

Heb je de velden opgemerkt die beginnen met _? Namelijk:

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

Dit zijn globale velden, dat wil zeggen velden die beschikbaar zijn onder alle typen in het GraphQL-schema. Globale velden bieden functionaliteit in plaats van gegevens, en beginnen per conventie met _.

Field to Input

Heb je die variabelen opgemerkt die beginnen met $__? Namelijk:

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

Dit zijn dynamische variabelen die de waarde bevatten van een veld dat eerder in dezelfde operatie is gedefinieerd. Variabele $__subscriberOptIn bevat bijvoorbeeld de waarde van veld subscriberOptIn dat erboven staat gedeclareerd.

Dit is een functie van de extensie Field to Input, waarmee je de uitvoer van een veld kunt gebruiken als invoer voor een ander veld. Zo kun je functionaliteit binnen de GraphQL query creëren.

In de query controleert veld isNotSubscriberOptInNAValue of de waarde van het eerder bevraagde veld subscriberOptIn niet gelijk is aan "NA", en berekent subscribedToNewsletter een AND-operatie met de waarden van velden hasSubscriberOptIn en isNotSubscriberOptInNAValue.

Verbinding maken met Mailchimp

Operatie MaybeCreateContactOnMailchimp bevat de logica om de payload-gegevens te extraheren en de Mailchimp API aan te roepen om het e-mailadres op de nieuwsbrieflijst in te schrijven.

Hier is de operatie met commentaar dat uitlegt wat elke regel doet:

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

Laten we de functies verkennen die in deze query worden gebruikt.

Omgevingsvariabelen

We moeten onze inloggegevens opgeven bij het verbinden met de Mailchimp API. We willen deze echter niet rechtstreeks in de GraphQL query invoeren, omdat ze ergens kunnen uitlekken (bijv. ze kunnen in een logbestand worden afgedrukt).

Daarom gebruiken we het globale veld _env (aangeboden door de extensie PHP Constants and Environment via Schema) om een omgevingsvariabele of PHP-constante te lezen, samen met de @remove-directive (aangeboden door de extensie Field Response Removal) om te voorkomen dat de inloggegevens in de respons worden afgedrukt.

Nu kunnen we onze inloggegevens declareren in wp-config.php:

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

Het HTTP-verzoek naar Mailchimp sturen

Het laatste onderdeel van de logica is veld _sendJSONObjectItemHTTPRequest, dat een HTTP-verzoek naar een service stuurt.

Omdat we verbinding willen maken met de Mailchimp API, levert veld mailchimpListMembersJSONObject de gegevens die vereist zijn door het REST API-eindpunt van Mailchimp, zoals aangegeven in de documentatie voor het inschrijven van een lid op een Mailchimp-lijst:

  • Stuur een POST-verzoek
  • Het eindpunt is https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • De body moet de velden email_address en status bevatten

Een webhook maken om te communiceren met elke API

De GraphQL query in dit bericht stuurt gegevens van InstaWP door naar Mailchimp.

Je kunt hetzelfde idee toepassen voor welke combinatie je ook nodig hebt: extraheer de gegevens uit een bronservice (welke dan ook), pas ze aan, en stuur ze door naar een doelservice (welke dan ook).

Veel plezier!

Terug naar alle berichten

Abonneer je op onze nieuwsbrief

Blijf op de hoogte van alle updates over Gato GraphQL.