Now that we have everything set up in our Express application, can we do something similar in our React application.

import {
	type NewTask,
	NewTaskSchema,
	type Task,
	TaskSchema,
	TasksSchema,
	type UpdateTask,
	UpdateTaskSchema,
} from 'busy-bee-schema';

const API_URL = 'http://localhost:4001';

Validating Our Tasks

Let’s make sure our response is what we think it is.

export const fetchTasks = async (showCompleted: boolean): Promise<Task[]> => {
	const url = new URL(`/tasks`, API_URL);

	if (showCompleted) {
		url.searchParams.set('completed', 'true');
	}

	const response = await fetch(url);

	if (!response.ok) {
		throw new Error('Failed to fetch tasks');
	}

	return TasksSchema.parse(await response.json());
};

Get Task

We’ll validate an individual task.

export const getTask = async (id: string): Promise<Task> => {
	const url = new URL(`/tasks/${id}`, API_URL);
	const response = await fetch(url);

	if (!response.ok) {
		throw new Error('Failed to fetch task');
	}

	return TaskSchema.parse(await response.json());
};

Create Task

For our POST requests, we’re going to want to validate the body.

export const createTask = async (task: NewTask): Promise<void> => {
	const url = new URL('/tasks', API_URL);

	const body = JSON.stringify(NewTaskSchema.parse(task));

	const response = await fetch(url, {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
		},
		body,
	});

	if (!response.ok) {
		throw new Error('Failed to create task');
	}
};

Let’s validate the body for updating the task as well.

export const updateTask = async (id: string, task: UpdateTask): Promise<void> => {
	const url = new URL(`/tasks/${id}`, API_URL);

	const body = JSON.stringify(UpdateTaskSchema.parse(task));

	const response = await fetch(url, {
		method: 'PUT',
		headers: {
			'Content-Type': 'application/json',
		},
		body,
	});

	if (!response.ok) {
		throw new Error('Failed to update task');
	}
};

Delete Task

There is actually nothing to do here.

export const deleteTask = async (id: string): Promise<void> => {
	const url = new URL(`/tasks/${id}`, API_URL);

	const response = await fetch(url, {
		method: 'DELETE',
	});

	if (!response.ok) {
		throw new Error('Failed to delete task');
	}
};

Next: Validating the Data Layer