apollo-cache-stateの使用

📔 結果

index.tsx

...
import { gql, useMutation, useQuery } from "@apollo/client";
// query 문 생략
...
export default function ApolloCacheStatePage() {
  const { data } = useQuery(FETCH_BOARDS);
  const [deleteBoard] = useMutation(DELETE_BOARD);
  const [createBoard] = useMutation(CREATE_BOARD);

クラス関数では、最近の関数にasyncを付けるべきです。

updateは、上記のリクエストが完了した後に実行される機能です。

既存のfetchBoards 10個から現在削除されているID 9個を作成します。 このようにして作成された9つの新しいfetchBoardを返し、それを上書きします。 const onClickDelete = (boardId) => async () => { await deleteBoard({ variables: { boardId: boardId, }, update(cache, { data }) { const deletedId = data.deleteBoard; cache.modify({ fields: { fetchBoards: (prev, { readField }) => { const newFetchBoards = prev.filter( (el) => readField("_id", el) !== deletedId ); return [...newFetchBoards]; }, }, }); }, }); };登记关数也是这样的! 追加された11個のcreateBoard成果物と上位10個の結果を返します。 data.createBoardを後ろに置くと、後ろに新しいものがあります。 const onClickCreate = () => { createBoard({ variables: { createBoardInput: { writer:「テスト」 password: "123", title:「テストタイトル」 contents:「テスト内容」 }, }, update(cache, { data }) { cache.modify({ fields: { fetchBoards: (prev) => { return [data.createBoard, ...prev]; }, }, }); }, }); }; return ( <> {data?.fetchBoards.map((el) => ( <div key={el._id}> <span>{el.writer}</span> <span>{el.title}</span> <span>{el.contents}</span> <button on Click={onClickDelete(el.id)}>削除</button> </div> ))} <button onClick={onClickCreate}>登録</button> </> ); }