Alimentando datos a los bloques en el editor
El contenido en el editor de WordPress se crea mediante bloques (Gutenberg), que obtienen sus datos del servidor mediante una API. El core de WordPress usa la WP REST API, pero también podemos usar Gato GraphQL para alimentar nuestros propios bloques.
Vamos a explorar cómo el bloque puede obtener datos del servidor GraphQL.
Endpoint
Como los bloques se usan dentro del contexto del editor de WordPress, el usuario ya está autenticado, y por tanto podemos conectarnos a un endpoint GraphQL interno (accesible solo dentro de wp-admin) en lugar de a un endpoint público.
Este endpoint interno blockEditor es accesible en:
https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditorEste endpoint tiene una configuración predefinida (es decir, no tiene aplicadas las preferencias del usuario del plugin), por lo que su comportamiento es consistente.
Convenientemente, también podemos apuntar a la variable global de JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, que contiene la URL del endpoint.
También puedes crear tu propio endpoint interno, y predefinir cualquier configuración específica requerida para tus bloques (habilitar mutaciones anidadas, habilitar namespacing, definir qué CPTs pueden consultarse, o cualquier otra cosa disponible en la Configuración del Esquema).
Alternativamente, puedes crear Consultas Persistidas y recuperar datos de ellas (en lugar de un endpoint). Echa un vistazo a cómo debe adaptarse el código del cliente.
Conectando vía fetch
Podemos usar el método fetch estándar para conectarnos al servidor.
Este código JavaScript envía una consulta con variables al servidor GraphQL, e imprime la respuesta por consola.
(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));
}
})();Enviando la cabecera nonce de REST
Si necesitas ejecutar una operación que incluya el nonce REST, añade la cabecera X-WP-Nonce.
Imprime una variable JS que contenga el nonce, vía código 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')
);
}
);Luego incluye el valor del nonce en las cabeceras de fetch:
// ...
headers: {
'X-WP-Nonce': `${ WP_REST_NONCE }`,
// ...
};Conectando mediante una biblioteca cliente de GraphQL
También puedes usar la biblioteca cliente de GraphQL de tu elección para conectarte al servidor. Algunas opciones son:
Aquí hay un ejemplo usando 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)
}El propio plugin Gato GraphQL alimenta sus bloques mediante GraphQL, usando la biblioteca graphql-request.
Echa un vistazo al código fuente del bloque "Schema Configuration" y su data store.