TanStack Query 入門 – React Query で Github のリポジトリ取得 API を実行

% npm list --depth=0
├── @tanstack/react-query@4.20.4
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── @typescript-eslint/eslint-plugin@5.46.0
├── @typescript-eslint/parser@5.46.0
├── @vitejs/plugin-react@3.0.0
├── eslint-config-prettier@8.5.0
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react@7.31.11
├── eslint@8.29.0
├── prettier-plugin-organize-imports@3.2.1
├── prettier@2.8.1
├── react-dom@18.2.0
├── react@18.2.0
├── typescript@4.9.4
├── vite-tsconfig-paths@4.0.2
└── vite@4.0.0

yarn add @tanstack/react-query

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { useState } from 'react'
import './App.css'

// 1. client を生成
const queryClient = new QueryClient()

// 2. アプリケーションを QueryClientProvider で囲む
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <GithubSample />
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  )
}

// 3. 使用例
function GithubSample() {
  // useQuery
  //   queryKey: 一意なキーを指定する
  //   queryFn: promise を返す関数を指定する
  const { isLoading, isError, data, error, refetch } =
    useQuery<RepositoriesResponse>({
      queryKey: ['orgs'],
      queryFn: () =>
        fetch(
          `https://api.github.com/search/repositories?q=org:tanstack&sort=stars`,
          {
            headers: {
              Authorization: 'Bearer <TOKEN>',
            },
          },
        ).then((res) => res.json()),
    })

  //  ローディング中
  if (isLoading) {
    return <span>Loading...</span>
  }

  // エラー発生時
  if (isError) {
    return <span>Error: {(error as any).message}</span>
  }

  // data は res.json() の結果にアクセスできる
  return (
    <div className="App">
      <table border={1} style={{ borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th>No</th>
            <th>name</th>
            <th>description</th>
            <th>createdAt</th>
            <th>star</th>
            <th>url</th>
          </tr>
        </thead>
        <tbody>
          {data &&
            data.items.map((v: any, index: any) => (
              <tr key={index}>
                <td>{index + 1}</td>
                <td>{v.name}</td>
                <td>{v.description}</td>
                <td>{new Date(v.created_at).toLocaleDateString()}</td>
                <td>{v.stargazers_count}</td>
                <td>{v.url}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  )
}

export default App

type Repository = {
  name: string
  description: string
  created_at: string
  stargazers_count: string
  url: string
  ...
}
type RepositoriesResponse = {
  items: Repository[]
  ...
}
...
// これで data の型が RepositoriesResponse | undefined になります
const { isLoading, isError, data, error } = useQuery<RepositoriesResponse>(...)

yarn add @tanstack/react-query-devtools

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <GithubSample />
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  )
}

/**
 * queryFn に相当する部分を外だし
 * queryKey で指定された変数を参照することが可能
 */
function getReposFn(param: QueryFunctionContext) {
  const [_key, { key }] = param.queryKey as [string, { key: string }]
  return fetch(
    `https://api.github.com/search/repositories?q=org:${key}&sort=stars`,
    {
      headers: {
        Authorization: 'Bearer <TOKEN>',
      },
    },
  ).then((res) => res.json())
}

// 3. 使用例
function GithubSample() {
  const [key, setKey] = useState('tanstack')

  // useQuery
  //   queryKey: 一意なキーを指定する
  //   queryFn: promise を返す関数を指定する
  const { isLoading, isError, data, error, refetch } =
    useQuery<RepositoriesResponse>({
      queryKey: ['orgs', { key }],
      queryFn: getReposFn,
    })
  ///

  return (
    <div className="App">
      {/* refetch で query を再実行する。このとき useState で定義した変数が最新の状態でクエリが行われる */}
      <select
        value={key}
        onChange={async (e) => {
          await setKey(e.target.value)
          refetch()
        }}
      >
        <option>tanstack</option>
        <option>vuejs</option>
        <option>facebook</option>
        <option>angular</option>
      </select>
      ...

  const { isInitialLoading, isLoading, isFetching, isError, data, error, refetch } =
    useQuery<RepositoriesResponse>({
      queryKey: ['orgs', { key }],
      queryFn: getReposFn,
      enabled: false,
    })

  const [enableQuery, setEnableQuery] = useState(false)  

  const { isInitialLoading, isLoading, isError, data, error, refetch } =
    useQuery<RepositoriesResponse>({
      queryKey: ['orgs', { key }],
      queryFn: getReposFn,
      enabled: enableQuery,
    })