에디터의 블록에 데이터 제공하기
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」 블록의 소스 코드와 해당 데이터 스토어를 확인해 보세요.