๐ WordPress ์ฝ์ด์ GraphQL API๊ฐ ์์ด์ผ ํ ๊น์?
2024๋ 05์ 01์ผ ์ ๋ฐ์ดํธ: Gato GraphQL vs WP REST API ๋น๊ต๋ฅผ ํ์ธํด ๋ณด์ธ์.
WordPress 5.7์ด ๊ณง ์ถ์๋ ์์ ์ ๋๋ค. ๋ง์ ๋ฆด๋ฆฌ์ค์์ ๊ทธ๋์๋ฏ์ด, WP REST API์๋ ๋ช ๊ฐ์ง ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ์์ ์ ๋๋ค.
์๋ก์ด ๊ธฐ๋ฅ ์ค ํ๋๊ฐ ํนํ ๋๊ธธ์ ๋์์ต๋๋ค: "Image Editor Accepts a List of Modifiers"์ ๋๋ค.
WordPress 5.5์์ ๋์ ๋
/wp/v2/media/<id>/edit์๋ํฌ์ธํธ๋ ์ต์์ ์์ค์ ํ์ ๋ฐ ํฌ๋กญ ์ ์ธ์ ํ์ฉํ๋ ์ ํ๋ API๋ฅผ ๊ฐ๊ณ ์์์ต๋๋ค. 50124์์๋ ์๋ก์ดmodifiers์์ฒญ ํ๋ผ๋ฏธํฐ๋ก ์์ ๋ฐฐ์ด์ ํ์ฉํจ์ผ๋ก์จ ์ด API๊ฐ ๋์ฑ ๊ฐ๋ ฅํ๊ณ ์ ์ฐํด์ก์ต๋๋ค.
import apiFetch from '@wordpress/api-fetch';
const data = {
modifiers: [
{
type: 'crop',
args: {
left : 0,
top : 0,
width : 80,
height: 80
}
},
{
type: 'rotate',
args: {
angle: 90
}
}
]
};
apiFetch( { data, method: 'POST', path: '/wp/v2/media/5/edit' } );์ด ๊ฐ๋ฐ์ ์ค๋ ์๊ฐ์ ๊ฑธ์ณ ์งํ๋์ด ์์ต๋๋ค.
๋จผ์ , WordPress 5.5์์ ์ด๋ฏธ์ง ํธ์ง ์๋ํฌ์ธํธ๊ฐ ๋์ ๋์์ต๋๋ค.
์ด ์๋ํฌ์ธํธ๋ ์ฒ์์ ๋ค์ ๊ฒฝ์ง๋์ด ์์ด, ์ด๋ฏธ์ง์ ์ ์ฉํ ๋ชจ๋ ์์ ์ ๊ดํ ๋ฐ์ดํฐ๋ฅผ ํ๊บผ๋ฒ์ ์ ๋ฌํด์ผ ํ์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ด๋ฏธ์ง๋ฅผ ํ์ ํ๊ณ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ์ต๋๋ค:
{
"x": 0,
"y": 0,
"width": 80,
"height": 80,
"rotate": 90
}๊ทธ ๋ค์, WordPress 5.6์์ WP REST API์ ์ผ๊ด ์ฒ๋ฆฌ ์์ ์ด ๋์ ๋์์ต๋๋ค.
๋ง์ง๋ง์ผ๋ก, ๊ณง ์ถ์๋ WordPress 5.7์์๋ ์ด๋ฏธ์ง์ ์ ์ฉํ ์์
๋ค์ด ๋ถ๋ฆฌ๋์ด "crop"๊ณผ "rotate" ์์
์ด ๊ฐ๊ฐ ์ ๊ณต๋ฉ๋๋ค. ์ด ์์
๋ค์ ๋จ๋
์ผ๋ก ์คํํ ์๋ ์๊ณ , ์ผ๊ด ์ฒ๋ฆฌ๋ฅผ ํตํด ๊ฐ์ ์์ฒญ ๋ด์์ ํจ๊ป ์คํํ ์๋ ์์ต๋๋ค.
์์ ์ดํด๋ณธ ๊ฒ์ฒ๋ผ, ์๋ํฌ์ธํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋ฐฉ์์ด ํจ์ฌ ๋ ์ธ๋ จ๋์ด์ก์ต๋๋ค:
{
"modifiers": [
{
"type": "crop",
"args": {
"left" : 0,
"top" : 0,
"width" : 80,
"height": 80
}
},
{
"type": "rotate",
"args": {
"angle": 90
}
}
]
}์ด๋ฏธ ์กด์ฌํ๋ ๊ฒ์ ๋ค์ ๋ง๋ค๊ณ ์๋ ๊ฑด ์๋๊น์?
WP REST API๋ WordPress์ ์ ์ผํ API๊ฐ ์๋๋๋ค. (์ ์ด๋) ๋ ๊ฐ์ง ๋์์ด ์์ต๋๋ค:
- GraphQL, WPGraphQL์ ํตํด
- GraphQL + persisted queries, Gato GraphQL์ ํตํด
๏ผโ๐ฝ ์ด ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ํธ์คํธ, ๋ฐ๋ก ์ ์ ๋๋ค โ๐ฝ๏ผ
GraphQL์ ์๋ก์ด ์ ํ์ API๋ก, ์ผ๊ด ์ฒ๋ฆฌ ์์ ์ ํ์ํฉ๋๋ค. GraphQL์ ์ฌ์ฉํ๋ฉด REST์์์ฒ๋ผ ์ปค์คํ ์๋ฃจ์ ์ ๊ฐ๋ฐํ๋ ๋ฐ ์๊ฐ๊ณผ ์๋์ง๋ฅผ ์์ ํ์๊ฐ ์์ต๋๋ค.
์ค์ ๋ก, REST๋ GraphQL์์ ์ด ๊ธฐ๋ฅ์ "๋ณต์ฌ"ํ๊ณ ์๋ค๊ณ ๋ณผ ์ ์์ต๋๋ค.

WP REST API์์ ์ผ๊ด ์ฒ๋ฆฌ ์์ ์ ์ง์ํ๋ ๋ฐ๋ ์ต์ 2๊ฐ, ์๋ง๋ 3๊ฐ์ ๋ฆด๋ฆฌ์ค ์ฌ์ดํด์ด ํ์ํ์ต๋๋ค. ์ด๋ ๊ฒฐ์ฝ ์งง์ ์๊ฐ์ด ์๋๋ฉฐ, ์ฌ๋ฌ ์ฌ๋์ ๊ธฐ์ฌ๊ฐ ํ์ํ์ต๋๋ค.
WordPress๊ฐ GraphQL๋ ํ์ฉํ ์ ์๊ณ , ์ด๋ฏธ์ง ํธ์ง ์๋ํฌ์ธํธ๊ฐ REST ๋์ GraphQL์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ค๋ฉด, ์ด ์ปจํธ๋ฆฌ๋ทฐํฐ๋ค์ ๋ค๋ฅธ ๊ฐ๋ฐ์ ์ง์คํ ์ ์์์ ๊ฒ์ ๋๋ค.
๊ฐ API์ ์ฅ์ ์ ํ์์ ๋ฐ๋ผ ํ์ฉํ ์ ์๋ค๋ฉด, WordPress๊ฐ ๋์ฑ ๋ฐ์ ํ๊ณ ํจ์ฌ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ๋ ์ ์์ง ์์๊น์?
GraphQL์์์ ์ผ๊ด ์ฒ๋ฆฌ ์์
Gato GraphQL์ด ์ผ๊ด ์ฒ๋ฆฌ ์์ ์ ์ง์ํ๋ ๋ฐฉ๋ฒ์ ํ๋๊ฐ ์๋๋ผ ์ฌ๋ฌ ๊ฐ์ง๋ก ์๊ฐํด ๋๋ฆฌ๊ฒ ์ต๋๋ค.
์ฒซ ๋ฒ์งธ๋ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ ๋๋ค: ์ฟผ๋ฆฌ์ ๋ฃจํธ์ ์ฌ๋ฌ ํ๋๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ค์ ์ฟผ๋ฆฌ๋ ์ฌ์ฉ์๋ฅผ ๋ก๊ทธ์ธ์ํค๊ณ ๋๊ธ์ ์ถ๊ฐํฉ๋๋ค:
mutation LogUserInAndAddCommentToPost {
loginUser(
by: { credentials: { usernameOrEmail: "test", password: "pass" } }
) {
id
name
}
addCommentToCustomPost(
input: {
customPostID: 1459
commentAs: { html: "Adding a comment: bla bla bla" }
}
) {
id
content
date
}
}๏ผ์ฐธ๊ณ ๋ก, ์ด๊ฒ์ GraphiQL ํด๋ผ์ด์ธํธ์ ๋๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ํด์๋ ์ด ํํ ๋ฆฌ์ผ์ ์ฐธ๊ณ ํ์ธ์.๏ผ
์ด ๋ ์์ ์ ์๋ก ๋ค๋ฅธ ๊ฐ์ฒด์ ์ ์ฉ๋์์ง๋ง, ๊ฐ์ ๊ฐ์ฒด์ ์ฌ๋ฌ ์์ ์ ์ ์ฉํ๊ณ ์ถ์ ๊ฒฝ์ฐ๋ ์์ต๋๋ค.
๋ค์์ผ๋ก, ๊ฐ์ ๊ฒ์๋ฌผ์ ๋ ๊ฐ์ ๋๊ธ์ ์ถ๊ฐํ๋ ์ฟผ๋ฆฌ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
mutation AddTwoCommentsToPost {
firstComment: addCommentToCustomPost(
input: {
customPostID: 1459
commentAs: { html: "This is my first response" }
}
) {
id
content
date
}
secondComment: addCommentToCustomPost(
input: {
customPostID: 1459
commentAs: { html: "This is my second response" }
}
) {
id
content
date
}
}์ด ๋ ๋๊ธ์ ์ด๋ฏธ ์กด์ฌํ๋ ๊ฒ์๋ฌผ์ ์ถ๊ฐ๋์์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ๊ฒ์๋ฌผ๋ ๋จผ์ ์์ฑํด์ผ ํ๋ ๊ฒฝ์ฐ์๋ ์ด๋ป๊ฒ ๋ ๊น์?
๊ทธ ๊ฒฝ์ฐ, ๊ฐ๋จํ ์ฟผ๋ฆฌ๋ ๋ ์ด์ ์๋ํ์ง ์์ต๋๋ค. ์๋ํ๋ฉด ์์ง ์์ฑ๋์ง ์์ ๊ฒ์๋ฌผ์ ID๋ฅผ ๋ฏธ๋ฆฌ ์ ์ ์๊ณ , ์ด๋ฅผ ๋ค๋ฅธ ์์
์ ์ธ์๋ก ์ ๋ฌํด์ผ ํ๊ธฐ ๋๋ฌธ์
๋๋ค๏ผํ๋ ์ธ์์ ?์ ์ฃผ๋ชฉํ์ธ์๏ผ:
mutation CreatePostAndAddTwoCommentsToPost {
createPost(input: { title: "Some post" }) {
id # <= I don't know what this value will be
}
addCommentToCustomPost(input: {
customPostID: ?,
commentAs: { html: "Blah blah blah" }
}) {
id
content
date
}
}ํ์ง๋ง ๊ฑฑ์ ํ์ง ๋ง์ธ์. Gato GraphQL์ด ํด๊ฒฐํด ๋๋ฆฝ๋๋ค. ํ๋๊ฐ ์๋๋ผ ๋ ๊ฐ์ง ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค!

์ฒซ ๋ฒ์งธ ๋ฐฉ๋ฒ์ ๋ค์ค ์ฟผ๋ฆฌ ์คํ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค.
์ด ์ฟผ๋ฆฌ์์๋ ์ฒซ ๋ฒ์งธ ์์
์ ์คํํ๊ณ , ๋๋ ํฐ๋ธ @export๋ฅผ ํตํด ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ด๋ณด๋ธ ๋ค์, ์ด ๊ฐ์ ๋ ๋ฒ์งธ ์ฟผ๋ฆฌ์ ์
๋ ฅ์ผ๋ก ์ฃผ์
ํฉ๋๋ค:
mutation AddComment {
addCommentToCustomPost(
customPostID: 1459
commentAs: { html: "Some insightful comment" }
) {
id @export(as: "newCommentID")
content
date
}
}
mutation AddResponseToComment @depends(on: "AddComment") {
replyComment(
parentCommentID: $newCommentID
commentAs: { html: "Debunking your insightful comment" }
) {
id
date
content
parent {
id
}
}
}๋์ฑ ์ธ๋ จ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ ์ค์ฒฉ ๋ฎคํ ์ด์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ด ์ฟผ๋ฆฌ์์๋ ์ฒซ ๋ฒ์งธ ์์ ์ ์คํํ๊ณ , ๊ทธ ์์ ๋ ๋ฒ์งธ ์์ ์ ์ค์ฒฉ์์ผ ์ฒซ ๋ฒ์งธ ์์ ์์ ์์ฑ๋ ๊ฐ์ฒด์ ์ ์ฉํฉ๋๋ค๏ผ๊ทธ๋ฆฌ๊ณ ์ธ ๋ฒ์งธ ์์ ์ ์ค์ฒฉ์ํค๋ ์์ผ๋ก ๊ณ์ํ ์ ์์ต๋๋ค๏ผ:
mutation AddCommentAndResponseAndResponse {
addCommentToCustomPost(
input: {
customPostID: 1459
commentAs: { html: "Some insightful comment" }
}
) {
id
content
date
reply(input: { commentAs: { html: "Debunking your insightful comment" } }) {
id
date
content
parent {
id
}
reply(input: { commentAs: { html: "No, it was right!" } }) {
id
date
content
parent {
id
}
}
}
}
}์ถ๊ฐ๋ก, ์ผ๊ด ์ฒ๋ฆฌ ์์ ์ ๋จ์ผ ์ํฐํฐ๋ฟ๋ง ์๋๋ผ ๊ฐ์ ์์ฒญ ๋ด์์ ์ฌ๋ฌ ์ํฐํฐ์ ๋์์ ์ ์ฉํ ์ ์์ต๋๋ค.
์ด ์ฟผ๋ฆฌ์์๋ ์๋ก์ด ๋๊ธ๊ณผ ๊ทธ์ ๋ํ ๋ชจ๋ ๋ต๊ธ์ด ์ฌ๋ฌ ๊ฒ์๋ฌผ์ ์ถ๊ฐ๋ฉ๋๋ค:
mutation AddCommentAndResponseToManyPosts {
posts(ids: [1657, 1153, 1499, 1459]) {
id
addComment(input: { commentAs: { html: "Some insightful comment" } }) {
id
content
date
reply(
input: { commentAs: { html: "Debunking your insightful comment" } }
) {
id
date
content
parent {
id
}
}
}
}
}๊ทธ๋ฆฌ๊ณ ์ด ํ๋ฌ๊ทธ์ธ์๋ ๋ ํ๋์ ๋น์ฅ์ ๋ฌด๊ธฐ๊ฐ ์์ต๋๋ค: ์๋ฒ ๋ ํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด ๊ฐ์ฒด ์์ ์ ๋ฐ์ดํฐ๋ฅผ ํ์ฉํด ๊ฐ ํ๋ ์ธ์์ ์ ๋ฌํ ์ฝํ ์ธ ๋ฅผ ์ปค์คํฐ๋ง์ด์ฆํ ์ ์์ต๋๋ค!
์ด ์ฟผ๋ฆฌ์์๋ ๋๊ธ์ ์์ฑ ๋์ ๊ฐ์ฒด์ ์ ๋ณด๊ฐ ํฌํจ๋์ด ์์ต๋๋ค:
mutation AddCustomCommentAndResponseToManyPosts {
posts(ids: [1657, 1153, 1499, 1459]) {
id
addComment(
input: {
commentAs: { html: "The post has ID {{ id }} and title {{ title }}" }
}
) {
id
content
date
reply(
input: {
commentAs: {
html: "The parent comment was posted on {{ dateStr(format: \"d/m/Y\") }}. Cool, right?"
}
}
) {
id
date
content
parent {
id
}
}
}
}
}ํ์์ ๋ฐ๋ผ REST์ GraphQL์ ์ฅ์ ์ ์ต๋ํ ํ์ฉํ๊ธฐ
Full Site Editing์ด ๊ฐ๋ฐ๋๊ณ ํ์ฅ๋จ์ ๋ฐ๋ผ, WordPress๋ ์ ์ ๋ ๊ทธ API๋ค์ ์์กดํ๊ฒ ๋ ๊ฒ์ ๋๋ค.
๊ธฐ์กด ๊ธฐ๋ฅ์ ๊ดํด์๋, REST API๊ฐ ์ง๊ธ๊น์ง ๋งค์ฐ ์ ์๋ํด ์์ต๋๋ค. ๋ฌธ์ ์๋ ๊ฒ์ ๋ค์ ๋ง๋ค ํ์๋ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ์์ผ๋ก ๊ฐ๋ฐ๋ ์๋ก์ด ๊ธฐ๋ฅ์ ๊ดํด์๋, ํน์ ๊ธฐ๋ฅ์ ๋ ์ ํฉํ ๋ฐฉ์์ ๋ฐ๋ผ REST์ GraphQL ์ค ํ๋๋ฅผ ์ ํํด ์ฌ์ฉํ๋ค๋ฉด WordPress์ ๋ ๋ง์ ์ด์ ์ด ์์ง ์์๊น์?
๋ต์ ์ฌ๋ฌ๋ถ์๊ฒ ๋ฌ๋ ค ์์ต๋๋ค...
