エディターのブロックにデータを提供する
WordPressエディターのコンテンツは（Gutenberg）ブロックで作成され、ブロックはAPIを通じてサーバーからデータを取得します。WordPressコアはWP REST APIを使用しますが、Gato GraphQLを使って独自のブロックを動かすこともできます。
ブロックがGraphQLサーバーからデータを取得する方法を見ていきましょう。
エンドポイント
ブロックはWordPressエディターのコンテキスト内で使用されるため、ユーザーはすでにログイン済みです。そのため、公開エンドポイントではなく、内部GraphQLエンドポイント（wp-admin内でのみアクセス可能）に接続できます。
この内部 blockEditor エンドポイントは以下のURLでアクセスできます：
https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditorこのエンドポイントは事前定義された設定を持ちます（つまり、プラグインのユーザー設定は適用されません）。そのため、動作が一貫しています。
便利なことに、エンドポイントURLを含むJavaScriptグローバル変数 GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT を参照することもできます。
独自の内部エンドポイントを作成することで、ブロックに必要な特定の設定を事前定義することもできます（ネストされたミューテーションの有効化、ネームスペースの有効化、クエリ可能なCPTの定義、スキーマ設定で利用可能なその他の設定など）。
あるいは、パーシステッドクエリを作成してエンドポイントの代わりにデータを取得することもできます。クライアントコードをどのように適応させるかをご確認ください。
fetch を使用した接続
標準の fetch メソッドを使ってサーバーに接続できます。
以下のJavaScriptコードは、変数付きのクエリをGraphQLサーバーに送信し、レスポンスをコンソールに出力します。
(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));
}
})();RESTのnonceヘッダーを送信する
RESTのnonceを含む操作を実行する必要がある場合は、X-WP-Nonce ヘッダーを追加してください。
PHPコードを通じて、nonceを含むJS変数を出力します：
// 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')
);
}
);次に、fetch のヘッダーにnonce値を含めます：
// ...
headers: {
'X-WP-Nonce': `${ WP_REST_NONCE }`,
// ...
};GraphQLクライアントライブラリを使用した接続
お好みのGraphQLクライアントライブラリを使用してサーバーに接続することもできます。いくつかの選択肢を示します：
以下は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)
}Gato GraphQL プラグイン自体も graphql-request ライブラリを使用してGraphQL経由でブロックを動かしています。
「Schema Configuration」ブロックのソースコードと、そのデータストアをご覧ください。