ミューテーション - データの書き方

これらは、ミューテーションを学習する前に知っておくべき概念を以下に示します

さっそくGraphQLを使ってデータを「書き込む」方法を見ていきましょう。GraphQLのミューテーションはGraphQLクエリの一種であるため、'POST''PUT''PATCH''DELETE'、およびAPIによく見られるようなバックエンドでの「ミューテーション」や変更を引き起こす可能性があります。

基本的なミューテーション

GraphQL APIにHasuraを使用しているため、アプリで使用できる挿入、更新、削除のミューテーションを取得できます。

これらのミューテーションがどのようなものなのか、todoアプリのコンテキストで試してみましょう。APIチームが独自開発したミューテーションなど、他のGraphQLサービスから取得したミューテーションは形状が異なる場合があります。

todoの作成

APIを呼び出してtodoを作成しましょう。ご想像の通り、これはtodoアプリにとって重要な部分です。😉

ポイント:ここで、todoを作成するためのミューテーションの名前が分からないとします。GraphiQLなら問題ありません。GraphiQLに移動して、右側にある「docs」タブをクリックします。そこで「todo」と入力すると、todoを使用するGraphQLクエリと型の一覧が表示されます。一覧を確認すれば、insert_todos が必要としているものだとすぐに分かるでしょう。

todoを作成するためのミューテーションの名前は insert_todos です。

mutation {
insert_todos(objects: [{title: "new todo"}]) {
returning {
id
}
}
}
GraphiQLを試してみましょう

ミューテーション後のデータを返す

挿入されるtodoのデータは、insert_todos ミューテーションの引数として送信されることに注意してください。ただし、ミューテーションの「フィールド」は、サーバーから提供してほしいレスポンス内容を指定しています。

試しに一度作成されたすべてのtodoオブジェクトを応答として取得してみましょう。

mutation {
insert_todos(objects: [{title: "new todo"}]) {
returning {
id
title
is_completed
is_public
created_at
}
}
}
GraphiQLを試してみましょう

挿入内容のパラメータ化

ミューテーションではほとんど場合、引数をパラメータ化する必要があります。「ハードコード」されたミューテーションがアプリで生じることはほとんどありません。なぜなら、基本的にデータの取得、変更、削除する変数は、ユーザーの操作に依存しているからです。

クエリ変数を使ってパラメータ化する方法が分かったので、早速使ってみましょう。

# The parameterised GraphQL mutation
mutation($todo: todos_insert_input!){
insert_todos(objects: [$todo]) {
returning {
id
}
}
}
# As a query variable
{
"todo": {
"title": "A new dynamic todo"
}
}

ここでは、todos_insert_input は変数 $todo の型であり、! は必須入力であることを示すために使用されます。

GraphiQLを試してみましょう

ミューテーションを使ったデータの更新や削除については、少し後で紹介します。これでミューテーションを攻略するための良いスタートが切れました。

チュートリアルの総括

  • 基本的なGraphQLミューテーションが使える
  • クエリ変数を使用して、ミューテーションに動的な変数/データを渡すことができる

次は、GraphQLサブスクリプションについて紹介します。

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin