Apollo GraphQL javascript react プログラミング

Apollo ClientのMutationsについて解説します

投稿日:

こんにちは、mabuiです。
最近仕事でGraphQLを使用していて、これは筋がいい技術だな〜流行ってほしいな〜〜と思っており、今後自分でもサービス作りに活用したいと考えています。
そこで今回は、GraphQLをクライアントから操作する時に便利なライブラリ、Apollo Clientを使用して、Mutationの使い方について解説して行きます。

 

Mutationとは?

Mutationとは、GraphQLにおけるデータの更新方法です。
REST APIに置き換えるとpost, put, deleteにあたるような操作で、データベースの値を更新する時に使用されます。
Queryがgetの役割なので、それ以外がMutationになりますね。

 

コード紹介

ではサンプルコードをまず乗せて、Mutationを使用するときの要点を書いていきます。

AddTodo.js

 

Todos.js

 

App.js

 


 

create-react-appで生成したAppコンポーネント内からMutationを実行するAddTodo, Todosコンポーネントを呼び出しています。

実行すると、AddTodoコンポーネントの出力結果としてAdd Todoボタンのついたフォームが表示され入力してクリックすると、入力したTODO内容とともにTodosコンポーネントからUpdate Todoボタンのついたフォームが出力されます。
出力されたフォームに入力してボタンを押すと、Add Todoで出力された文字が切り替わり、TODO内容が更新されます。

最初のフォームではGraphQLに対して値の追加、次のフォームでは値の更新処理が行われているのが分かります。

 

Mutationコンポーネント

MutationコンポーネントはUIからMutationを実行するためのコンポーネントです。
AddTodo, Todosコンポーネントのレンダリングメソッドからそれぞれ呼び出しています。
Mutationコンポーネントのmutation属性にクエリを渡すことで実行します。
variables属性に値を渡すことでクエリに変数を持たせることもできます。

 

キャッシュの更新方法

Mutationでデータを追加・削除する場合、Apollo cacheは更新されないため、AddTodoコンポーネントではupdateメソッドでキャッシュに更新をかけています。
第一引数としてApollo cacheを使用でき、キャッシュのもつcache.readQueryメソッドでキャッシュからデータを読み込み、追加したTODOと連結して、cache.writeQueryメソッドでキャッシュを更新しています。
アップデートの指定をしたため、UIも自動的に更新されます。

TODOを更新した時にはupdateメソッドは必要なく、画面は自動的に切り替わります。
更新時にはMutationを実行した時にできるtodoのデータがキャッシュに入れられ、クエリ結果が自動的に再構築されます。

以上となります!
データの追加・削除時にアップデートの指定をしないとキャッシュと画面が更新されない点は注意が必要ですね。
 

-Apollo, GraphQL, javascript, react, プログラミング
-, , , , ,

Copyright© mabui.org , 2018 All Rights Reserved Powered by STINGER.