Suspense × データ取得【React Query(TanStack) / SWR(Vercel)】

■目次

React Queryの導入 / 使い方

▼公式

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

導入

該当プロジェクトを開いているVSCodeでターミナルを開き、以下コマンドを実行する

<aside> 🌿 axiosもインストールしてね

</aside>
```
npm i @tanstack/react-query axios
```

初期設定【プロバイダーを設置する】

index.tsx(js)かApp.tsx(js)を開き、@tanstack/react-queryからQueryClientとQueryClientProviderをimportする
```
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
```
QueryClient のインスタンスを生成し、定数queryClientに格納する

これでアプリケーション全体の共通設定みたいなことができる
```
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

**const queryClient = new QueryClient();**

〜〜〜
```

QueryClientProvider でAppコンポーネントをラップする

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    **<QueryClientProvider client={queryClient}>
      <App /> 
    </QueryClientProvider>**
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();

初期設定完了！

使い方

外部データを取得・使用したいコンポーネントファイルを開く

（TypeScriptの場合）外部データの型定義なども記述またはimportしておく

▼コード例

/** 外部import */
import { FC } from "react";

**type Album = {
  userId: number;
  id: number;
  title: string;
};**

export const ReactQuery: FC = () => {
  return (
    <div>
      <p>React Query</p>
    </div>
  );
};

@tanstack/react-query からuseQueryメソッドをimportする

/** 外部import */
import { FC } from "react";
**import { useQuery } from "@tanstack/react-query";**

type Album = {
  userId: number;
  id: number;
  title: string;
};

export const ReactQuery: FC = () => {
  return (
    <div>
      <p>React Query</p>
    </div>
  );
};

useQuery はクエリした結果を返してくれるメソッドなので、分割代入で受け取れるよう、雛型を記述する

（TypeScriptの場合）戻り値が何かを型定義しておく。おそらく冒頭で定義した外部データになるはず。

/** 外部import */
import { FC } from "react";
import { useQuery } from "@tanstack/react-query";

type Album = {
  userId: number;
  id: number;
  title: string;
};

export const ReactQuery: FC = () => {
  **const { } = useQuery<Album[]>();**

  return (
    <div>
      <p>React Query</p>
    </div>
  );
};

続けて、useQuery() に2つの引数をセットする
- 第一引数：queryKey
  
  クエリ固有の一意のキー。アプリケーション全体で一意になれば、名前はなんでもOK！
  
  配列 & 文字列でセットする。
  
  <aside> 🌿 React Queryには取得したデータをフロント側で覚えておいてくれる（キャッシュしてくれる）機能があり、どのデータかを判別するために必要
  
  </aside>
- 第二引数：queryFn
  
  関数。フェッチャー関数といって、データフェッチの処理や設定を記述する。
  
  関数名は分かりやすければ何でもOK！
▼コード例
```
/** 外部import */
import { FC } from "react";
import { useQuery } from "@tanstack/react-query";

type Album = {
  userId: number;
  id: number;
  title: string;
};

export const ReactQuery: FC = () => {
  const { } = useQuery<Album[]>(**["albums"], fetchAlbums**);

  return (
    <div>
      <p>React Query</p>
    </div>
  );
};
```

第二引数にセットしたフェッチャー関数の処理を記述する

別ファイルに分割しても、同じファイル内に記述してもOK！

<aside> 🌿 データ取得なので、async/awaitとaxiosやfetchメソッドを使おう！

</aside>

▼コード例

/** 外部import */
import { FC } from "react";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";

type Album = {
  userId: number;
  id: number;
  title: string;
};

**const fetchAlbums = async() => {
  const result = await axios.get<Album[]>("<https://jsonplaceholder.typicode.com/albums>");**
// axiosの場合、.dataに取得データが格納されている
  **return result.data;
}**

export const ReactQuery: FC = () => {
  const { } = useQuery<Album[]>(["albums"], fetchAlbums);

  return (
    <div>
      <p>React Query</p>
    </div>
  );
};

useQuery の分割代入に、値をセットする

<aside> 🌿 Suspenseと併用する場合はdataだけでOK！

</aside>

【セットできる値】

isLoading：データ取得中といったフラグを返してくれる
error：クエリ結果でエラーが起きた場合、情報を返してくれる
data：取得データ

etc…

Queries | TanStack Query Docs

▼コード例

/** 外部import */
import { FC } from "react";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";

type Album = {
  userId: number;
  id: number;
  title: string;
};

const fetchAlbums = async() => {
  const result = await axios.get<Album[]>("<https://jsonplaceholder.typicode.com/albums>");
  return result.data;
}

export const ReactQuery: FC = () => {
  const **{ isLoading, error, data }** = useQuery<Album[]>(["albums"], fetchAlbums);

  return (
    <div>
      <p>React Query</p>
    </div>
  );
};

分割代入で取得した各値を適宜使ってコンポーネントを実装していく

▼コード例

/** 外部import */
import { FC } from "react";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";

type Album = {
  userId: number;
  id: number;
  title: string;
};

const fetchAlbums = async() => {
  const result = await axios.get<Album[]>("<https://jsonplaceholder.typicode.com/albums>");
  return result.data;
}

export const ReactQuery: FC = () => {
  const { isLoading, error, data } = useQuery<Album[]>(["albums"], fetchAlbums);

	// Suspenseを使うと、もっと宣言的に記述できる
  **if (error) return <p>エラーです！</p>;
  if (isLoading) return <p>ローディング中だよ〜</p>;**

  return (
    <div>
      <p>React Query</p>
      **{data?.map((album) => (
        <p key={album.id}>{album.title}</p>
      ))}**
    </div>
  );
};