> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/tutorial/4.-crud-operations/4.4-deleting-tasks.md).

# 4.4 Deleting Tasks

Lastly, we want to allow our users to be able to delete tasks.

### Step 1: Write Mutation

Let's write a mutation to delete our task.

{% code title="src/components/TaskDeleteButton/DeleteTaskMutation.graphq l.ts" %}

```typescript
import gql from 'graphql-tag';

export const DeleteTaskMutation = gql`
	mutation DeleteTaskMutation($id: UUID!) {
		deleteFromtasksCollection(filter: { id: { eq: $id } }) {
			records {
				id
			}
		}
	}
`;
```

{% endcode %}

### Step 2: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

```
yarn graphql-codegen
```

This will update the file `src/graphql-types.ts`.

### Step 3: Create Delete Button

Now lets an `IconButton` to delete the task. 

{% code title="src/components/TaskDeleteButton/TaskDeleteButton.tsx" %}

```typescript
import { useMutation } from '@apollo/client';
import { IconButton } from '@bluebase/components';
import { useNavigation, useTheme } from '@bluebase/core';
import React, { useCallback } from 'react';

import { DeleteTaskMutationMutation } from '../../graphql-types';
import { TasksCollectionQuery } from '../TaskList/TasksCollectionQuery.graphql';
import { DeleteTaskMutation } from './DeleteTaskMutation.graphql';

export interface TaskDeleteButtonProps {
	id: string
}

export const TaskDeleteButton = (props: TaskDeleteButtonProps) => {
	const { id } = props;
	const { theme } = useTheme();
	const { navigate } = useNavigation();

	const onCompleted = useCallback(() => {
		navigate('TasksApp');
	}, []);

	const [deleteTask, { loading }] = useMutation<DeleteTaskMutationMutation>(DeleteTaskMutation, {
		onCompleted,
		refetchQueries: [TasksCollectionQuery],
		awaitRefetchQueries: true,
		variables: { id }
	});

	return (
		<IconButton
			name="delete"
			onPress={deleteTask}
			color={theme.palette.text.secondary}
			disabled={loading}
		/>
	);
};

TaskDeleteButton.displayName = 'TaskDeleteButton';
```

{% endcode %}

{% code title="src/components/TaskDeleteButton/index.ts" %}

```typescript
export * from './TaskDeleteButton';

import { TaskDeleteButton } from './TaskDeleteButton';
export default TaskDeleteButton;
```

{% endcode %}

### Step 4: Add Button to EditTaskScreen

Modify the `EditTaskScreen` to add the `headerRight` option:

```
{
	name: 'EditTask',
	screen: 'EditTaskScreen',
	path: 't/:taskId',
	exact: true,
	
	options: ({ route }: any) => ({
		title: 'Edit Task',
		headerRight: () => <TaskDeleteButton id={route.params.taskId} />
	}),
},
```

This should be the result:

![Web](/files/c2T0wedg1vjnabZaZB9C) ![iOS](/files/aaFj1RVxyKEUdCRZImUg)