ブログ

🛠 WordPressのコアにGraphQL APIを搭茉すべきか

Leonardo Losoviz
著者 Leonardo Losoviz ·

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からこの機胜を「コピヌ」しおいるずも蚀えたす。

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がサポヌトしたす。䞀぀ではなく、二぀の゜リュヌションを提䟛したす

GraphQL APIはあなたを気にかけおいたす

最初の方法は、耇数ク゚リ実行機胜を䜿うこずです。

このク゚リでは、最初の操䜜を実行し、その結果をディレクティブ @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はより恩恵を受けられるのではないでしょうか

答えはあなた次第です...

あなたのご意芋は


ニュヌスレタヌを賌読する

Gato GraphQL のすべおのアップデヌトを把握したしょう。