Editördeki bloklara veri besleme
WordPress editöründeki içerik, verilerini sunucudan bir API aracılığıyla alan (Gutenberg) blokları üzerinden oluşturulur. WordPress çekirdeği WP REST API'yi kullanır, ancak kendi bloklarımızı beslemek için Gato GraphQL'i de kullanabiliriz.
Bloğun GraphQL sunucusundan nasıl veri alabileceğini inceleyelim.
Endpoint
Bloklar WordPress editörü bağlamında kullanıldığından, kullanıcı zaten oturum açmış durumdadır; dolayısıyla genel bir endpoint yerine dahili bir GraphQL endpoint'ine (yalnızca wp-admin içinden erişilebilir) bağlanabiliriz.
Bu dahili blockEditor endpoint'i şu adresten erişilebilir:
https://mysite.com/wp-admin/edit.php?page=gatographql&action=run_query&endpoint_group=blockEditorBu endpoint'in önceden tanımlanmış bir yapılandırması vardır (yani plugin'in kullanıcı tercihleri ona uygulanmaz), dolayısıyla davranışı tutarlıdır.
Kolaylık açısından, endpoint URL'sini içeren GATOGRAPHQL_BLOCK_EDITOR_ADMIN_ENDPOINT JavaScript global değişkenine de işaret edebiliriz.
Ayrıca kendi dahili endpoint'inizi oluşturabilir ve bloklarınız için gereken özel yapılandırmayı önceden tanımlayabilirsiniz (iç içe mutations'ları etkinleştirme, namespace'lemeyi etkinleştirme, hangi CPT'lerin sorgulanabileceğini tanımlama veya Şema Yapılandırmasında mevcut olan diğer herhangi bir şey).
Alternatif olarak, Persisted Queries oluşturabilir ve verileri bir endpoint yerine bunlardan alabilirsiniz. İstemci kodunun nasıl uyarlanması gerektiğine göz atın.
fetch ile bağlanma
Sunucuya bağlanmak için standart fetch metodunu kullanabiliriz.
Bu JavaScript kodu, GraphQL sunucusuna değişkenlerle birlikte bir query gönderir ve yanıtı konsola yazdırır.
(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 başlığını gönderme
REST nonce içeren bir işlem gerçekleştirmeniz gerekiyorsa X-WP-Nonce başlığını ekleyin.
PHP kodu aracılığıyla nonce'u içeren bir JS değişkeni yazdırın:
// 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')
);
}
);Ardından fetch başlıklarına nonce değerini ekleyin:
// ...
headers: {
'X-WP-Nonce': `${ WP_REST_NONCE }`,
// ...
};GraphQL istemci kütüphanesi ile bağlanma
Sunucuya bağlanmak için istediğiniz GraphQL istemci kütüphanesini de kullanabilirsiniz. Bazı seçenekler şunlardır:
İşte GraphQL request kullanan bir örnek:
/* 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 plugin'inin kendisi, graphql-request kütüphanesini kullanarak bloklarını GraphQL aracılığıyla beslemektedir.
"Schema Configuration" bloğunun kaynak koduna ve onun data store'una göz atın.