Logo
Programmare con un'API
Programmare con un'APIAlimentare i dati ai blocchi nell'editor

Alimentare i dati ai blocchi nell'editor

Il contenuto nell'editor WordPress viene creato tramite blocchi (Gutenberg), che recuperano i loro dati dal server tramite un'API. Il core di WordPress usa la WP REST API, ma possiamo anche usare Gato GraphQL per alimentare i nostri blocchi.

Esploriamo come il blocco può recuperare i dati dal server GraphQL.

Endpoint

Poiché i blocchi vengono utilizzati nel contesto dell'editor WordPress, l'utente è già connesso, e quindi possiamo collegarci a un endpoint GraphQL interno (accessibile solo all'interno di wp-admin) anziché a un endpoint pubblico.

Questo endpoint interno blockEditor è accessibile a:

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

Questo endpoint dispone di una configurazione predefinita (ovvero non gli vengono applicate le preferenze utente del plugin), cosicché il suo comportamento è coerente.

Comodamente, possiamo anche puntare alla variabile globale JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, che contiene l'URL dell'endpoint.

Puoi anche creare il tuo endpoint interno, e predefinire qualsiasi configurazione specifica richiesta per i tuoi blocchi (abilitare le mutation annidate, abilitare il namespacing, definire quali CPT possono essere interrogati, o qualsiasi altro elemento disponibile nella Configurazione dello Schema).

In alternativa, puoi creare delle Persisted Queries e recuperare i dati da esse (anziché da un endpoint). Scopri come il codice client deve essere adattato.

Connessione tramite fetch

Possiamo usare il metodo fetch standard per collegarci al server.

Questo codice JavaScript invia una query con variabili al server GraphQL, e stampa la risposta nella 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));
  }
})();

Invio dell'header nonce REST

Se hai bisogno di eseguire un'operazione che include il nonce REST, aggiungi l'header X-WP-Nonce.

Stampa una variabile JS contenente il nonce, tramite codice 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')
    );
  }
);

Includi poi il valore del nonce negli header di fetch:

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

Connessione tramite una libreria client GraphQL

Puoi anche usare la libreria client GraphQL di tua scelta per collegarti al server. Alcune opzioni sono:

Ecco un esempio che usa 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)
}

Il plugin Gato GraphQL stesso alimenta i suoi blocchi tramite GraphQL, usando la libreria graphql-request.

Consulta il codice sorgente del blocco "Schema Configuration" e il suo data store.