このセクションではこれまでで作ったTodoアプリにcache機能を追加します。

cacheとは

　ウェブページを訪れたときにそのページの情報を一時保存する仕組みのことです。そうすることで次回からページの表示スピードが上がります。cookieと似ていますが保存するのはユーザーのIDやEmailではなく、ページの情報などを保存します。

cache　in Apollo client

Apollo client ではsrc/index.jsで記述したInMemoryCache()によって様々なcacheを実装できます。

まずTodoを新規作成したときにcache更新を行うようにかいていきましょう。src/pages/addTodo.jsにあるaddTTodoMutationにupdateのコールバック関数を追加します。

    // src/pages/addTodo.js
            
    const [addTodo] = useMutation(ADD_TODO, {
        variables: {
            content
        },
        update: (store, { data }) => {   　　// ＜ー追加
            const  todos  =  store.readQuery({
                query: GET_TODOS
            });
            store.writeQuery({
                query: GET_TODOS,
                data: {
                  listing:  [ ...todos.listing, data.addTodo ]
                  
                }
            });
        },
        onCompleted: () => {
            history.push('/')
        }
    })
                    

readQueryでListingQueryを読み込み、writeQueryで更新を行います。Query編で作成したListingのQueryを読み込みます。

続いてupdateTodoをおこなったときにcacheを更新するようにかいていきましょう。

    // src/pages/todoListing.js

   updateTodo({
       variables: {
           id: parseInt(id),
           content: todo
       },

       update: (store) => {
          const  todos  =  store.readQuery({
              query: GET_TODOS
          });

          const updateTodoListing = todos.listing.map(pickedTodo => {
              if(pickedTodo.id ===  parseInt(id)){
                  return {
                      ...pickedTodo,
                      content: todo
                  }
              }
              return pickedTodo
          })

          store.writeQuery({
              query: GET_TODOS,
              data: {
                  listing: updateTodoListing
              }
          });

       }
   })
                    

先ほどと同様にupdateのなかにかいています。GET_TODOSを取得した後にupdateTodoListingと定義し、データ変更を施した新しいTodoのarrayをwriteQueryでGET_TODOSに挿入しています。

このセクションのコードはこちらに置いておくので各自確認してみてください。

また、自身で先ほどのセクションで追加した、deleteTodo関数にもcacheの更新の追加を付けてみてください。

ここまでで簡単なApollo Client + React.jsのチュートリアルを終了します。このほかにも様々な機能があり、これからArticlesで紹介していくので是非チェックしてみてください。