Logo
Programando com uma API
Programando com uma APIAlimentando dados aos blocos no editor

Alimentando dados aos blocos no editor

O conteúdo no editor WordPress é criado por meio de blocos (Gutenberg), que buscam seus dados do servidor via uma API. O core do WordPress usa a WP REST API, mas também podemos usar o Gato GraphQL para alimentar nossos próprios blocos.

Vamos explorar como o bloco pode buscar dados do servidor GraphQL.

Endpoint

Como os blocos são utilizados no contexto do editor WordPress, o usuário já está autenticado, e portanto podemos nos conectar a um endpoint GraphQL interno (acessível apenas dentro do wp-admin) em vez de um endpoint público.

Este endpoint interno blockEditor é acessível em:

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

Este endpoint possui uma configuração predefinida (ou seja, não aplica as preferências do usuário do plugin), de modo que seu comportamento é consistente.

Convenientemente, também podemos apontar para a variável global JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, que contém a URL do endpoint.

Você também pode criar seu próprio endpoint interno, e predefinir qualquer configuração específica necessária para seus blocos (habilitando mutations aninhadas, habilitando namespacing, definindo quais CPTs podem ser consultados, ou qualquer outra opção disponível na Configuração do Schema).

Alternativamente, você pode criar Queries Persistidas e recuperar dados delas (em vez de um endpoint). Veja como o código do cliente deve ser adaptado.

Conectando via fetch

Podemos usar o método fetch padrão para nos conectar ao servidor.

Este código JavaScript envia uma query com variáveis ao servidor GraphQL e imprime a resposta no 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));
  }
})();

Enviando o header nonce do REST

Se você precisar executar uma operação incluindo o nonce do REST, adicione o header X-WP-Nonce.

Imprima uma variável JS contendo o nonce via 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')
    );
  }
);

Em seguida, inclua o valor do nonce nos headers do fetch:

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

Conectando via uma biblioteca cliente GraphQL

Você também pode usar a biblioteca cliente GraphQL de sua preferência para se conectar ao servidor. Algumas opções são:

Aqui está um exemplo 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)
}

O próprio plugin Gato GraphQL alimenta seus blocos via GraphQL, usando a biblioteca graphql-request.

Confira o código-fonte do bloco "Schema Configuration" e seu data store.