# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bluebase.gitbook.io/core/tutorial/4.-crud-operations/4.4-deleting-tasks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.