【React】ReactアプリにTanStackQueryライブラリを導入する方法

ReactアプリにTanStackQueryを導入する方法について記載します。

TanStackQuery公式サイト

導入方法

実際の導入方法

1.. インストール

まずは必要なパッケージをインストールします。

npm install @tanstack/react-query
# または
yarn add @tanstack/react-query

2.QueryClient の設定（アプリ全体に適用）

main.tsx（または index.tsx）に、QueryClient と QueryClientProvider を設定します。

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { QueryClient,QueryClientProvider  } from "@tanstack/react-query";
import App from './App';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ChakraProvider value={defaultSystem}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </ChakraProvider>
  </React.StrictMode>,
);

3. データ取得の基本例（useQuery）

例えば、APIからユーザー一覧を取得するコンポーネントを作ります。

src/tanstackQueryComponents/UserList.tsx

// components/UserList.tsx
import { useQuery } from "@tanstack/react-query";
import { Box, Spinner, Text, VStack } from "@chakra-ui/react";

type User = {
  id: number;
  name: string;
  email: string;
};

async function fetchUsers(): Promise<User[]> {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!res.ok) {
    throw new Error("ユーザーの取得に失敗しました");
  }
  return res.json();
}

export const UserList = () => {
  const { data, isLoading, isError, error } = useQuery<User[], Error>({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  if (isLoading) return <Spinner />;
  if (isError) return <Text color="red.500">{error.message}</Text>;

  return (
    <VStack align="start">
      {data?.map((user) => (
        <Box key={user.id} p={4} borderWidth="1px" borderRadius="md" w="100%">
          <Text fontWeight="bold">{user.name}</Text>
          <Text>{user.email}</Text>
        </Box>
      ))}
    </VStack>
  );
};

4. ミューテーション（POST / PUT / DELETE）

データを変更する場合は useMutation を使います。

src/tanstackQueryComponents/AddUserButton.tsx

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@chakra-ui/react";

async function addUser(newUser: { name: string; email: string }) {
  const res = await fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newUser),
  });
  return res.json();
}

export const AddUserButton = () => {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: addUser,
    onSuccess: () => {
      // キャッシュ更新（再フェッチ）
      queryClient.invalidateQueries({ queryKey: ["users"] });
    },
  });

  return (
    <Button
      colorScheme="teal"
      onClick={() => mutation.mutate({ name: "新しいユーザー", email: "[e-mail]" })}
      loading={mutation.isPending}
    >
      ユーザー追加
    </Button>
  );
};

App.tsx

// App.tsx
import React from "react";
import { Container, Heading, VStack } from "@chakra-ui/react";
import { UserList } from "@/tanstackQueryComponents/UserList";
import { AddUserButton } from "@/tanstackQueryComponents/AddUserButton";

const App: React.FC = () => {
  return (
    <Container maxW="container.md" py={8}>
      <VStack align="stretch">
        <Heading as="h1" size="lg" textAlign="center">
          ユーザー一覧（TanStack Query + Chakra UI）
        </Heading>

        <AddUserButton />

        <UserList />
      </VStack>
    </Container>
  );
};

export default App;

おまけ:開発支援：React Query Devtools

開発時にデバッグが超楽になるツールです。

npm install @tanstack/react-query-devtools