TanStack Query 使用教程

TanStack Query 使用教程

query🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址:https://gitcode.com/gh_mirrors/qu/query

项目介绍

TanStack Query（原名 React Query）是一个强大的数据同步、缓存和更新库，主要用于React、Vue和Solid等前端框架。它简化了从服务器获取、缓存、同步和更新数据的复杂性，使得开发者可以更专注于业务逻辑而非数据管理。

项目快速启动

安装

首先，你需要在你的项目中安装TanStack Query。你可以使用npm或yarn来安装：

npm install @tanstack/react-query
# 或者使用 yarn
yarn add @tanstack/react-query

配置

在你的React应用中，你需要设置QueryClientProvider来提供一个QueryClient实例：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

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

使用

现在，你可以在你的组件中使用useQuery钩子来获取数据：

import { useQuery } from '@tanstack/react-query';

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/TanStack/query').then(res =>
      res.json()
    )
  );

  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

应用案例和最佳实践

案例1：实时数据更新

TanStack Query支持实时数据更新，通过设置refetchInterval选项，你可以定期从服务器获取最新数据：

const { data } = useQuery('tickers', fetchTickers, {
  refetchInterval: 10000, // 每10秒更新一次
});

案例2：错误处理

你可以通过设置onError回调来处理查询错误：

const { data } = useQuery('userData', fetchUserData, {
  onError: (error) => {
    console.error('Something went wrong: ', error);
  },
});

典型生态项目

1. React Router

结合React Router，你可以在路由变化时自动重新获取数据：

import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  const { data } = useQuery(['user', userId], () => fetchUser(userId));

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

2. Axios

使用Axios进行数据请求，可以更方便地处理HTTP请求：

import axios from 'axios';
import { useQuery } from '@tanstack/react-query';

const fetchPosts = () => axios.get('/api/posts').then(res => res.data);

function Posts() {
  const { data } = useQuery('posts', fetchPosts);

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

通过这些模块的介绍和示例，你应该能够快速上手并有效地使用TanStack Query来优化你的前端数据管理。

query🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址:https://gitcode.com/gh_mirrors/qu/query