Adding to-do pages
Users will need to manage their to-dos via the app, including creating, editing, and viewing their to-dos. These equate to different pages, which we will add.
First, let’s create the specific React-Query queries we will need to fetch to-dos from the backend. We can do this by adding the following code to frontend/src/queries.ts:
import axios from "axios";
import { useQueryClient } from "@tanstack/react-query";
import { Todo } from "src/models";
import { useQuery } from "src/query";
export const STALE_TIME = 1000 * 60 * 5; // 5 mins
export const useTodosQuery = () =>
useQuery<Todo[]>(
["todos"],
async () => {
const response = await axios.get("/todos/");
return response.data.todos.map(
(json...
