前回は、フロントエンドで、GraphQLのデータを作成しました。

今回は、GraphQLのデータを削除・更新します。

コードは、こちらです。

フロントエンド:

バックエンド:

まずは、詳細画面で削除ボタンを押すと、データが削除できるようにします。

GraphQLのデータを削除する

まずは、GraphQLのデータを削除します。

ApolloStudioを開いて、mutationをコピーします。

mutation DeleteBook($deleteBookId: Int!){
  deleteBook(id: $deleteBookId) {
    errors {
      message 
    }
    book {
      title
    }
  }
}

pagesフォルダのBookDetail.tsxを開きます。

gqlの中に、先程コピーしたmutationを貼り付けます。

const deleteBookData = gql`
  mutation DeleteBook($deleteBookId: Int!) {
    deleteBook(id: $deleteBookId) {
      errors {
        message
      }
      book {
        title
      }
    }
  }
`;

useMutationをインポートしましょう。

import { gql, useMutation, useQuery } from "@apollo/client";

useMutationdeleteBookDataを指定します。

const [ deleteBook ] = useMutation(deleteBookData);

MUIのButtonで削除ボタンを作成しましょう。

<Button 
  variant="contained" 
  color="error" 
  startIcon={<DeleteIcon />} 
  onClick={() => {}
>
  削除
</Button>

onClickのなかで、先程作成した、deleteBookを設定します。

deleteBookの中にvariablesdeleteBookIdを指定します。

指定する内容は、book.idです。

<Button 
  variant="contained" 
  color="error" 
  startIcon={<DeleteIcon />} 
  onClick={() => { 
    deleteBook({
      variables: {
        deleteBookId: book.id,
      },
    });
  }}
>
  削除
</Button>

では、動作確認します。

image2

削除ボタンを押して、読書リストに戻ると、

image3

IDが『9』のデータが削除されました。

image4

GraphQLもデータが存在していません。

GraphQLのデータを更新する

次は、読了の『済』や『未』をクリックで変更できるようにします。

ApolloStudioを開いて、mutationをコピーします。

mutation UpdateBook($updateBookId: Int!, $input: UpdateBookInput!){
  updateBook(id: $updateBookId, input: $input) {
    errors {
      message 
    }
    book {
      title
    }
  }
}

pagesフォルダのBook.tsxを開きます。

gqlに、先程コピーしたmutationを貼り付けます。

const updateBookData = gql`
  mutation UpdateBook($updateBookId: Int!, $input: UpdateBookInput!) {
    updateBook(id: $updateBookId, input: $input) {
      errors {
        message
      }
      book {
        title
      }
    }
  }
`;

useMutationをインポートします。

import { gql, useMutation, useQuery } from "@apollo/client";

useMutationで、upsateBookDataを指定します。

const [ updateBook ] = useMutation(updateBookData);

TableCellの『済』と『未』に MUIでButtonを設定します。

{book.isRead ? (
  <TableCell>
    <Button
      size="small"
      onClick={() => {}
    >
      済
    </Button>
  </TableCell>
) : (
  <TableCell>
    <Button
      size="small"
      onClick={() => {}
    >
      未
    </Button>
  </TableCell>
)}

onClickupdateBookを設定します。

updateBookの中は、Apollo Studioの更新時に作成したGraphQLのVariablesを参考にします。

image5

{book.isRead ? (
  <TableCell>
    <Button
      size="small"
      onClick={() => {
        updateBook({
          variables: {
            updateBookId: book.id,
            input: {
              isRead: false,
            },
          },
        });
      }}
    >
      済
    </Button>
  </TableCell>
) : (
  <TableCell>
    <Button
      size="small"
      onClick={() => {
        updateBook({
          variables: {
            updateBookId: book.id,
            input: {
              isRead: true,
            },
          },
        });
      }}
    >
      未
    </Button>
  </TableCell>
)}

では、動作確認します。

image6

ID『1』の『済』をクリックして、リロードすると、

image7

『済』から『未』へ修正できました。

次は、ID『2』の『未』をクリックして、リロードすると、

image8

『未』から『済』に変わりました。

GraphQLを確認すると、

image9

isReadの内容が変わっているのが確認できました。

全文は、以下の通りです。

次回は、会員登録機能とログイン機能を実装します。

ブログ一覧