TanStack Queryで簡単なTODOアプリ

こんにちは。naoです。今回はタイトルにある通りTanStackQuery（旧React Query）を使って簡単なTodoアプリを作っていこうと思います。

TanStack Queryとは公式ページを見ると以下のように書かれています。

Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
Toss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences.

引用：公式ホームページ

きめ細かな状態管理、手動の再フェッチ、そして際限なく大量の非同期スパゲッティ コードを廃棄します。TanStack Query は、開発者とユーザーの両方のエクスペリエンスを直接向上させる、宣言型で常に最新の自動管理クエリとミューテーションを提供します。と書かれています。（翻訳のまま）

環境構築

TanStack Queryではデータを取得するだけでなく、作成、更新、削除も行うことができるので、バックエンドにはExpressを構築し、フロントエンドはReactを使用します。

プロジェクト名は何でも良いですが、今回はtanstack-todoというディレクトリを作成し、その中にbackendフォルダを作成します。backendフォルダに移動し以下のコマンドを入力してください。

 command
npm init -y
npm install express nodemon
npm install prisma
npx prisma init --datasource-provider sqlite

たくさんインストールをしましたが、npmの初期化、prismaの初期セットアップ、expressのインストールを行いました。

データベースの設定

次にデータベースの設定を行っていきます。backendフォルダのルートディレクトリの.envファイルを開きDATABASE_URLを以下のようにしてください。

 .env
DATABASE_URL="file:./dev.db"

prisma/schema.prismaファイルを開き下にmodelを定義します。

 schema.prisma
model Todo {
id Int @id @default(autoincrement())
name String
isCompleted Boolean
}

定義が完了したらターミナルで以下のコマンドを入力してください。

 html
npx prisma db push
npx prisma studio

Todoテーブルが作られていたらOKです。

データ取得APIの作成

次にデータ取得のAPIを作ります。まずpackage.jsonを開いてscriptsを以下のようにしてください。

 html
"scripts": {
"start": "nodemon index.js"
},

この設定をすることで、コードの変更があった際には自動でNode.jsのアプリケーションが再起動してくれます。

次にindex.jsを開いて以下のように記述してください。

 index.js
const express = require("express");
const { PrismaClient } = require("@prisma/client");
const app = express();
const port = 3001;
const prisma = new PrismaClient();
app.get("/todos", async (req, res) => {
const todos = await prisma.todo.findMany();
return res.json(todos);
});
app.listen(port, () => console.log(`BackendPort： ${port}!`));

/todosがアクセスした際に先ほど作成したtodosテーブルからレコードを取得し、返すというAPIを作りました。

npm startでサーバを立ち上げて、localhost:3001/todosにアクセスしてデータが返ってくればOKです。

まだデータを挿入していない人はPrisma Studioからデータを何件か登録しておいてください。

Reactのセットアップ

次にReactを使ってフロントエンドのセットアップをします。

ターミナルで以下のコマンドを入力してください。

 command
npx create-react-app frontend
cd frontend
npm i @tanstack/react-query

frontendという名前でプロジェクトを作り、その次にTansStackQueryのインストールを行いました。

一覧取得コンポーネントの作成

srcフォルダ以下にcomponentsフォルダを作成してTodo.jsxを作成します。

 Todo.jsx
import React from "react";
const Todo = () => {
return <div>一覧</div>;
};
export default Todo;

次に作成したcomponentをApp.jsで読み込ませます。

 html
import "./App.css";
import Todo from "./components/Todo";
function App() {
return (
<div className="App">
<Todo />
</div>
);
}
export default App;

確認のためにfrontendディレクトリをターミナルで開いて以下のコマンドでサーバを起動させます。

 command
npm start

一覧という文字があればOKです。

TanStack Queryのセットアップ

さっそくデータ取得を行なっていきたいところですが、まずはTanStack Queryを使えるようにするために

App.jsでセットアップをする必要があります。