1 of 1

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.

src/components/TaskDeleteButton/DeleteTaskMutation.graphq l.ts

import gql from 'graphql-tag';

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

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.

src/components/TaskDeleteButton/TaskDeleteButton.tsx

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';

src/components/TaskDeleteButton/index.ts

export * from './TaskDeleteButton';

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

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: