react-query的基本使用

react-query 是一个用于 React 应用程序的数据获取、缓存和同步的库，旨在简化处理服务器状态的过程。它提供了一套简洁的 API 来管理异步数据，并优化了数据的请求和缓存机制，帮助开发者轻松地处理数据的获取、更新和错误管理。react-query 文档 注意多个版本演示使用的是 "react-query": "^3.39.3",

主要特点：

1. 数据获取: react-query 提供了 useQuery 钩子，可以方便地从服务器获取数据，并自动处理加载状态和错误状态。
2. 数据缓存: 该库能自动缓存查询结果，避免重复请求同一数据，提高性能。
3. 数据同步: react-query 支持自动或手动更新数据，确保组件始终显示最新的信息。
4. 背景刷新: 当用户重新访问某个页面时，react-query 可以在后台自动刷新数据，以保证信息的及时性。
5. 支持变更和提交: 使用 useMutation 钩子可以简化数据的提交和更新。

使用场景：

• 需要频繁从服务器获取数据的应用程序。
• 数据变化频繁，希望快速同步状态的应用。
• 需要处理复杂的异步请求和错误管理的场景。

总的来说，react-query 是一个强大且易用的工具，可以大幅简化数据管理的复杂性，提高开发效率。

安装

npm install react-query
# or
pnpm add react-query

使用

import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App.tsx'
import './index.css'

const queryClient = new QueryClient();

createRoot(document.getElementById('root')!).render(
  // <StrictMode>
  //   <App />
  // </StrictMode>,
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
)

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function App() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.title}</li>
      ))}
    </ul>
  );
}

export default App

使用 useQuery 获取数据: 在需要获取数据的组件中，你可以使用 useQuery 钩子。

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const Users = () => {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.title}</li>
      ))}
    </ul>
  );
};

使用 useMutation 提交数据: 如果需要提交数据，可以使用 useMutation。

import { useMutation } from 'react-query';

const createUser = async (newUser) => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newUser),
  });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const CreateUser = () => {
  const mutation = useMutation(createUser);

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newUser = {
      name: formData.get('name'),
      email: formData.get('email'),
    };
    mutation.mutate(newUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" required />
      <button type="submit">Create User</button>
    </form>
  );
};