弊社エンジニアの記事になります。

はじめに

GraphQLを学ぶにあたって、Apolloの公式チュートリアルが非常に有益でした。このチュートリアルは、GraphQLの基礎についても触れている為、GraphQLとApolloを実務に近い形でセットで学べる点が優れていると感じました。その中でも特に、キャッシュの制御については非常に勉強になった為、要点をまとめていきます。

プロジェクトにApolloを導入検討している方、既に実務で使用している方、キャッシュ戦略を練る方などのお役に立てれば幸いです。いきなり本題読みたい方はこちら

そもそもGraphQLとは？という方はこちらの記事
GraphQLの基本的な操作についてはこちらの記事

Apollo Clientとは

JavaScript用の包括的な状態管理ライブラリで、ローカルとリモート両方のデータをGraphQLで管理できます。アプリケーションのデータのフェッチ（取得）や、キャッシュ、更新を行いながら、UIを自動的に更新できます。

キャッシュの仕組み

GraphQLでフェッチしたデータは、正規化後にインメモリのキャッシュに保存される為、Apollo Clientの初期設定時、cacheにInMemoryCasheを渡しておきましょう。

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
 
// Apollo clientの設定
const client = new ApolloClient({
  uri: 'http://localhost:4000', // GraphQLサーバーのURL
  cache: new InMemoryCache(), // キャッシュの設定
});

Apollo Clientは、クエリ発行後にまずキャッシュを探して、データがある場合はそのまま返し、ない場合はサーバーにリクエストを送ってレスポンスを返す、という仕様になっています。その為、キャッシュにデータが既にある場合は、高速な画面表示が可能となっています。

このデータフローについては、公式の図がわかりやすい為、一度ご覧になって下さい。

キャッシュの制御方法〜fetchPolicy〜

Apollo Clientでは、useQueryを用いてクエリを実行する際に、fetchPolicyというオプションでキャッシュの方法を制御することができます。

import { useQuery } from '@apollo/client';
 
const { loading, error, data } = useQuery(MY_QUERY, {
  fetchPolicy: 'cache-and-network', // fetchPolicy記述例
});

fetchPolicyオプションは以下の6つの中から、クエリごとのニーズに合わせて適切なものを選択できます。

…

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blog/information-technology/graphql-apollo-client

エンジニア積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

エンジニア、デザイナー、営業など積極採用中です！

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「スマホアプリエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「エンジニアリングマネージャー」「営業」などを積極採用中です！

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode