基本使用

前一节的示例虽然已经展示了要在一个应用中如何使用React Query，但是并不完整。接下来将使用一个完整的数据获取、数据更新、缓存控制的流程来说明在大部分场景中，React Query的使用方法。

在大部分的应用场景中，我们都需要从服务端取得数据，然后在应用中做出一些操作后，需要将更新的数据保存回服务端，此时我们之前从服务端获取的数据就需要进行刷新。这个数据操作的流程在使用React Query以后，会变得十分简练和清晰。

首先，将React Query引入到应用中，这一步与上一节中的应用启动示例相同。

import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App.tsx';

const queryClient = new QueryClient();

function main() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

接下来，定义两个与服务端进行交互的数据操作方法。

import axios, { AxiosResponse } from 'axios';

export async function getThings(): Promise<Thing[]> {
  return axios.get<Thing[]>('/things');
}

export async function deleteThings(id: number): Promise<AxiosResponse<boolean>> {
  return axios.delete<AxiosResponse<boolean>>(`/things?id=${id}`);
}

然后就可以在组件中使用已经定义好的这些查询了。

import { useMutation, useQuery, useQueryClient } from 'react-query';
import { deleteThings, getThings } from './queries.ts';

function App() {
  const client = useQueryClient();

  const things = useQuery(['things'], getThings);
  const mutation = useMutation(deleteThings, {
    onSuccess: () => {
      client.invalidateQueries(['things']);
    }
  });

  return (
    <div>
      <ul>
        {things.data.map(thing => (
          <li key={thing.id}>
            {thing.name}
            <button onClick={() => mutation.mutate(thing.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在这个示例中，每个列表项都带有一个删除按钮，当点击这个按钮的时候，这个列表项就会被删除，并且会重新查询列表内容，刷新整个列表。其中所涉及到的具体功能的使用，将在后面的章节进行进一步说明。