# 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](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FmxKNZy4N8F6JAWCb5ogX%2FScreenshot%202022-04-23%20at%2011.54.57%20PM.png?alt=media\&token=7f2d7b84-ddad-4a10-8f77-9dc6af755bfd) ![iOS](https://3369392052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPjsIbS1DfhqT8BS3Ui%2Fuploads%2FBubsfEeFMB1l4AKQrFvN%2FScreenshot%202022-04-23%20at%2011.54.59%20PM.png?alt=media\&token=7af62b74-079a-4f94-9d78-d443f0db1d09)