Logo
Coderen met een API
Coderen met een APIGegevens doorgeven aan blokken in de editor

Gegevens doorgeven aan blokken in de editor

Inhoud in de WordPress-editor wordt gemaakt via (Gutenberg) blokken, die hun gegevens via een API van de server ophalen. WordPress core gebruikt de WP REST API, maar we kunnen ook Gato GraphQL gebruiken om onze eigen blokken van data te voorzien.

Laten we verkennen hoe een blok gegevens kan ophalen van de GraphQL-server.

Endpoint

Omdat blokken worden gebruikt binnen de context van de WordPress-editor, is de gebruiker al ingelogd. Daardoor kunnen we verbinding maken met een intern GraphQL-endpoint (alleen toegankelijk binnen wp-admin) in plaats van een publiek endpoint.

Dit interne blockEditor-endpoint is toegankelijk via:

https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditor

Dit endpoint heeft een vooraf gedefinieerde configuratie (d.w.z. het past de gebruikersvoorkeuren van de plugin niet toe), zodat het gedrag consistent is.

Handig is ook dat we kunnen verwijzen naar de JavaScript-globale variabele GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, die de endpoint-URL bevat.

Je kunt ook je eigen intern endpoint aanmaken en elke specifieke configuratie vooraf definiƫren die je blokken nodig hebben (geneste mutaties inschakelen, naamruimte inschakelen, definiƫren welke CPT's bevraagd kunnen worden, of wat dan ook dat beschikbaar is in de Schemaconfiguratie).

Als alternatief kun je Persisted Queries aanmaken en gegevens daaruit ophalen (in plaats van via een endpoint). Bekijk hoe de clientcode moet worden aangepast.

Verbinding maken via fetch

We kunnen de standaard fetch-methode gebruiken om verbinding te maken met de server.

Deze JavaScript-code stuurt een query met variabelen naar de GraphQL-server en drukt het antwoord af in de console.

(async function () {
  const limit = 3;
  const data = {
    query: `
      query GetPostsWithAuthor($limit: Int) {
        posts(pagination: { limit: $limit }) {
          id
          title
          author {
            id
            name
          }
        }
      }
    `,
    variables: {
      limit: `${ limit }`
    },
  };
 
  const response = await fetch(
    GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT,
    {
      method: 'post',
      body: JSON.stringify(data),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Content-Length': data.length,
      },
      credentials: 'include',
    }
  );
 
  /**
   * Execute the query, and await the response
   */
  const json = await response.json();
 
  /**
   * Check if the query produced errors, otherwise use the results
   */
  if (json.errors) {
    console.log(JSON.stringify(json.errors));
  } else {
    console.log(JSON.stringify(json.data));
  }
})();

De REST nonce-header meesturen

Als je een bewerking moet uitvoeren inclusief REST nonce, voeg dan de X-WP-Nonce-header toe.

Druk een JS-variabele met de nonce af via PHP-code:

// Generate HTML in the editor:
// <script type="text/javascript">var WP_REST_NONCE = "{ Nonce value }"</script>
add_action(
  'admin_print_scripts',
  function(): void {
    printf(
      '<script type="text/javascript">var %s = "%s"</script>',
      'WP_REST_NONCE',
      wp_create_nonce('wp_rest')
    );
  }
);

Voeg vervolgens de nonce-waarde toe in de headers van fetch:

// ...
  headers: {
    'X-WP-Nonce': `${ WP_REST_NONCE }`,
    // ...
  };

Verbinding maken via een GraphQL-clientbibliotheek

Je kunt ook een GraphQL-clientbibliotheek naar keuze gebruiken om verbinding te maken met de server. Enkele opties zijn:

Hier is een voorbeeld met GraphQL request:

/* eslint-disable */
 
const { request, gql } = require(`graphql-request`)
 
main()
 
async function main() {
  const query = gql`
    query {
      posts {
        id
        title
        author {
          id
          name
        }
      }
    }
  `
 
  const data = await request(GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, query)
  console.log(data)
}

De Gato GraphQL-plugin zelf voorziet zijn blokken van data via GraphQL, met behulp van de graphql-request-bibliotheek.

Bekijk de broncode van het "Schema Configuration"-blok en zijn data store.