Craft CMS でエントリ作成フォームを GraphQL で作ってみた #craftcms

Craft CMS でエントリ作成フォームを GraphQL で作ってみる。

発端は Sprig プラグインが面白そうだなー、と思って触っていたのだけれど、それを使っていたら結局普通にエントリ作成フォームができただけだった。

Sprig
https://plugins.craftcms.com/s…

プラグインをどう使うか？というところ次第なので、今回使い方のイメージが間違っていたところだった。

コード全体

<form method="POST" >
  {{ csrfInput() }}
  <div>title: <input type="search" name="fields[query]" value=""></div>
  <div>text: <input type="text" name="fields[testtext]" value=""></div>
  <input type="submit" value="Search">

  {% set postParams = craft.app.request.getBodyParam('fields') %}

{% if postParams %}

  {% header "Authorization: Bearer hogehoge" %}
  {% set createEntry %}
  mutation($title:String,$testtext:String){
    save_test_test_Entry(
      authorId: 1,
      title: $title,
      testtext: $testtext,
    ){
      id
      title
    }
  }
  {% endset %}
  {% set variables = {'title': (postParams.query),'testtext': (postParams.testtext)} %}
  {% set createEntries = gql(createEntry, variables) %}

  <p>エントリ「{{ createEntries.data.save_test_test_Entry.title }} 」を作成しました</p>

{% endif %}
</form>

結局のところはフォームのページで自身にPOSTしつつ、その request を使って、gql 経由でエントリを作成するという感じになる。

何回か作ってみてるけど、mutation などの query（？）とvariables を分けておいて最後セットするのが使いやすい気はしてきた。

まぁ、案件とかで作るときは @tinybeans @BUN がよしなにしてくれるからあまり使うことはなさそうだけど。。。

POSTするので

{{ csrfInput() }}

は忘れないようにする必要があるのと、レスポンス受けとったときが

createEntries.data.save_test_test_Entry

こんな感じで、セクション、入力タイプを渡して取り出すところがなんか汎用的に書けていない気はするから、そういうところは使いながらいい方法を考えた方がいいんだろうな。。。