ð 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ã¯ã©ã€ã¢ã³ãã§ããäœ¿ãæ¹ã«ã€ããŠã¯ãã¡ãã®ãã¥ãŒããªã¢ã«ãã芧ãã ãããïŒ
ãããã®2ã€ã®æäœã¯ç°ãªããªããžã§ã¯ãã«é©çšãããŸããããåããªããžã§ã¯ãã«è€æ°ã®æäœãé©çšãããå ŽåããããŸãã
次ã«ãåãæçš¿ã«2ã€ã®ã³ã¡ã³ãã远å ããã¯ãšãªãèŠãŠã¿ãŸãããã
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
}
}ãããã®2ã€ã®ã³ã¡ã³ãã¯æ¢åã®æçš¿ã«è¿œå ãããŸãããããããæçš¿ãæåã«äœæããå¿ èŠãããå Žåã¯ã©ããªãã§ããããïŒ
ãã®å Žåãã·ã³ãã«ãªã¯ãšãªã¯ããŸãæ©èœããŸããããªããªããäœæäºå®ã®æçš¿ã®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 ã§ãšã¯ã¹ããŒããããã®å€ã2çªç®ã®ã¯ãšãªã®å
¥åãšããŠæ³šå
¥ããŸãïŒ
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
}
}
}ããã«ãšã¬ã¬ã³ããªã®ã¯ããã¹ãããããã¥ãŒããŒã·ã§ã³ãäœ¿ãæ¹æ³ã§ãã
ãã®ã¯ãšãªã§ã¯ãæåã®æäœãå®è¡ãããã®äžã«2çªç®ã®æäœããã¹ãããŸããããã«ãããæåã®æäœã§äœæããããªããžã§ã¯ãã«å¯ŸããŠé©çšãããŸãïŒããã«3çªç®ã®æäœããã¹ãããããšãã§ããŸãïŒïŒ
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ã¯ããæ©æµãåããããã®ã§ã¯ãªãã§ããããïŒ
çãã¯ããªã次第ã§ã...
