Logo
Programmieren mit einer API
Programmieren mit einer APIDaten an Blöcke im Editor liefern

Daten an Blöcke im Editor liefern

Inhalte im WordPress-Editor werden über (Gutenberg-)Blöcke erstellt, die ihre Daten über eine API vom Server abrufen. WordPress-Core verwendet die WP REST API, aber wir können auch Gato GraphQL einsetzen, um unsere eigenen Blöcke zu versorgen.

Schauen wir uns an, wie ein Block Daten vom GraphQL-Server abrufen kann.

Endpoint

Da Blöcke im Kontext des WordPress-Editors verwendet werden, ist der Benutzer bereits eingeloggt. Daher können wir uns mit einem internen GraphQL-Endpoint verbinden (der nur im wp-admin zugänglich ist) statt mit einem öffentlichen Endpoint.

Dieser interne blockEditor-Endpoint ist erreichbar unter:

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

Dieser Endpoint hat eine vordefinierte Konfiguration (d.h. die Benutzereinstellungen des Plugins werden nicht auf ihn angewendet), sodass sein Verhalten konsistent ist.

Praktischerweise können wir auch auf die globale JavaScript-Variable GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT verweisen, die die Endpoint-URL enthält.

Du kannst auch deinen eigenen internen Endpoint erstellen und jede spezifische Konfiguration vordefinieren, die deine Blöcke benötigen (verschachtelte Mutations aktivieren, Namespacing aktivieren, festlegen, welche CPTs abgefragt werden können, oder alles andere, was in der Schema-Konfiguration verfügbar ist).

Alternativ kannst du Persisted Queries erstellen und Daten daraus abrufen (statt aus einem Endpoint). Schau dir an, wie der Client-Code angepasst werden muss.

Verbindung über fetch

Wir können die standardmäßige fetch-Methode verwenden, um uns mit dem Server zu verbinden.

Dieser JavaScript-Code sendet eine Query mit Variablen an den GraphQL-Server und gibt die Antwort in der Konsole aus.

(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));
  }
})();

Den REST-Nonce-Header senden

Wenn du eine Operation ausführen musst, die einen REST-Nonce enthält, füge den Header X-WP-Nonce hinzu.

Gib eine JS-Variable mit dem Nonce per PHP-Code aus:

// 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')
    );
  }
);

Füge dann den Nonce-Wert in die Header von fetch ein:

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

Verbindung über eine GraphQL-Client-Bibliothek

Du kannst auch die GraphQL-Client-Bibliothek deiner Wahl verwenden, um dich mit dem Server zu verbinden. Einige Optionen sind:

Hier ist ein Beispiel mit 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)
}

Das Gato GraphQL-Plugin selbst versorgt seine Blöcke über GraphQL und verwendet dabei die Bibliothek graphql-request.

Schau dir den Quellcode des „Schema Configuration"-Blocks und seinen Data Store an.