Logo
Programowanie z API
Programowanie z APIPrzekazywanie danych do bloków w edytorze

Przekazywanie danych do bloków w edytorze

Treść w edytorze WordPress jest tworzona za pomocą bloków (Gutenberg), które pobierają dane z serwera przez API. Rdzeń WordPress używa WP REST API, ale możemy również używać Gato GraphQL do zasilania własnych bloków.

Zobaczmy, jak blok może pobierać dane z serwera GraphQL.

Endpoint

Ponieważ bloki są używane w kontekście edytora WordPress, użytkownik jest już zalogowany, dlatego możemy połączyć się z wewnętrznym endpointem GraphQL (dostępnym tylko w wp-admin) zamiast z publicznym endpointem.

Ten wewnętrzny endpoint blockEditor jest dostępny pod adresem:

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

Ten endpoint ma wstępnie zdefiniowaną konfigurację (tzn. nie stosuje preferencji użytkownika z pluginu), dzięki czemu jego zachowanie jest spójne.

Wygodnie, możemy też wskazać globalną zmienną JavaScript GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT, która zawiera adres URL endpointu.

Możesz również utworzyć własny wewnętrzny endpoint i wstępnie zdefiniować dowolną konkretną konfigurację wymaganą dla Twoich bloków (włączając zagnieżdżone mutacje, włączając namespacing, definiując jakie CPT mogą być odpytywane lub cokolwiek innego dostępnego w Konfiguracji schematu).

Alternatywnie możesz tworzyć Persisted Queries i pobierać z nich dane (zamiast z endpointu). Sprawdź, jak kod klienta musi zostać dostosowany.

Łączenie za pomocą fetch

Możemy użyć standardowej metody fetch, aby połączyć się z serwerem.

Ten kod JavaScript wysyła query ze zmiennymi do serwera GraphQL i wypisuje odpowiedź do konsoli.

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

Wysyłanie nagłówka nonce REST

Jeśli musisz wykonać operację zawierającą nonce REST, dodaj nagłówek X-WP-Nonce.

Wydrukuj zmienną JS zawierającą nonce za pomocą kodu 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')
    );
  }
);

Następnie dołącz wartość nonce w nagłówkach do fetch:

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

Łączenie za pomocą biblioteki klienta GraphQL

Możesz również użyć wybranej przez siebie biblioteki klienta GraphQL, aby połączyć się z serwerem. Niektóre opcje to:

Oto przykład użycia 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)
}

Sam plugin Gato GraphQL zasila swoje bloki przez GraphQL, używając biblioteki graphql-request.

Sprawdź kod źródłowy bloku "Schema Configuration" i jego data store.