Alimenter des données aux blocs dans l'éditeur
Le contenu dans l'éditeur WordPress est créé via des blocs (Gutenberg), qui récupèrent leurs données depuis le serveur via une API. Le cœur de WordPress utilise la WP REST API, mais nous pouvons également utiliser Gato GraphQL pour alimenter nos propres blocs.
Explorons comment le bloc peut récupérer des données depuis le serveur GraphQL.
Endpoint
Comme les blocs sont utilisés dans le contexte de l'éditeur WordPress, l'utilisateur est déjà connecté, et nous pouvons donc nous connecter à un endpoint GraphQL interne (accessible uniquement dans wp-admin) plutôt qu'à un endpoint public.
Cet endpoint interne blockEditor est accessible à :
https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditorCet endpoint dispose d'une configuration prédéfinie (c'est-à-dire qu'il n'a pas les préférences utilisateur du plugin appliquées), de sorte que son comportement est cohérent.
De manière pratique, nous pouvons également pointer vers la variable globale JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, qui contient l'URL de l'endpoint.
Vous pouvez également créer votre propre endpoint interne, et prédéfinir toute configuration spécifique requise pour vos blocs (activer les mutations imbriquées, activer le namespacing, définir quels CPTs peuvent être interrogés, ou tout autre élément disponible dans la Configuration du Schéma).
Vous pouvez également créer des Persisted Queries et récupérer des données à partir de celles-ci (plutôt qu'à partir d'un endpoint). Consultez comment le code client doit être adapté.
Connexion via fetch
Nous pouvons utiliser la méthode fetch standard pour nous connecter au serveur.
Ce code JavaScript envoie une requête avec des variables au serveur GraphQL, et affiche la réponse dans la 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));
}
})();Envoi de l'en-tête nonce REST
Si vous avez besoin d'exécuter une opération incluant le nonce REST, ajoutez l'en-tête X-WP-Nonce.
Affichez une variable JS contenant le nonce, via du code PHP :
// 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')
);
}
);Incluez ensuite la valeur du nonce dans les en-têtes de fetch :
// ...
headers: {
'X-WP-Nonce': `${ WP_REST_NONCE }`,
// ...
};Connexion via une bibliothèque cliente GraphQL
Vous pouvez également utiliser la bibliothèque cliente GraphQL de votre choix pour vous connecter au serveur. Voici quelques options :
Voici un exemple utilisant 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)
}Le plugin Gato GraphQL lui-même alimente ses blocs via GraphQL, en utilisant la bibliothèque graphql-request.
Consultez le code source du bloc "Schema Configuration" et son data store.