Delete element

You've been taught a lot and now deleting an element will be quiet simple.

In PageContainer for your single element like SingleArticle.tsx. You need to add a new Ant Design Button for deleting in HeaderContent component.

SingleArticle.tsx - Delete button

return (
  <HeaderContent
    {...otherProps}
    actionsRight={
      <Space>
        {/* ADD HERE*/}
        <Button
          loading={deleteLoading}
          onClick={() => deleteArticle({ id: parseInt(id) })}
        >
          {t("actions:delete")}
        </Button>
        {/* ADD HERE*/}
      </Space>
    }
  />
);

This button will trigger the mutate function of our mutation request useDeleteArticleMutation with the wanted ID parameter.

SingleArticle.tsx - Delete button

 const { mutate, isLoading: deleteLoading } = useDeleteArticleMutation<Error>(
        graphqlRequestClient,
        {
            onSuccess: (
                data: DeleteArticleMutation,
                _variables: DeleteArticleMutationVariables,
                _context: unknown
            ) => {
                router.back();
                if (!deleteLoading) {
                    showSuccess(t('messages:success-deleted'));
                }
            },
            onError: () => {
                showError(t('messages:error-deleting-data'));
            }
        }
    );

    const deleteArticle = ({ id }: DeleteArticleMutationVariables) => {
        mutate({ id });
    };
);

That's it !