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 是一个用于管理数据获取、更新、缓存和同步的现代化库。其开源项目的目录结构如下：

packages

• query: 核心模块实现。
• devtools: 提供开发工具支持。
• react-query: 集成 React 的包装器。
• vue-query: 集成 Vue.js 的包装器。

examples

示例应用，用于展示 TanStack Query 在不同框架下的集成和用法。

scripts

自定义脚本集合，如构建、测试等自动化任务。

docs

文档目录，包括 API 参考手册和使用指南。

.gitignore

Git 忽略文件列表，排除不必要的文件和目录不被版本控制。

package.json

项目依赖和构建脚本的配置文件。

README.md

项目的主要读取我文件，包含了项目介绍、特性、快速入门等内容。

---

启动文件介绍

由于 TanStack Query 主要作为功能库而存在，没有单一的启动文件概念，但通常在使用时会在应用程序中引入如下关键文件或组件来初始化或使用 TanStack Query：

引入核心库

// 通常在你的主要应用文件（例如：app.tsx）中引入
import { QueryClient } from '@tanstack/query-core';

创建 QueryClient 实例

const queryClient = new QueryClient();

提供给 React 应用

如果你正在使用 React，则可能需要创建并提供 QueryClientProvider 组件：

import { QueryClientProvider } from 'react-query';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用代码 */}
    </QueryClientProvider>
  );
}

配置文件介绍

TanStack Query 不直接提供单独的配置文件，配置通过构造函数传递给 QueryClient 实例：

const queryClient = new QueryClient({
  defaultOptions: {
    // 默认查询选项
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

这里的 defaultOptions 可以覆盖默认的行为，比如自动刷新策略 (refetchOnWindowFocus) 和重试次数 (retry)。这些设置可以根据具体需求进行灵活调整，以适应不同的网络环境和性能要求。

以上是基于最新版本 TanStack Query (假设为 v4.x 或更高版本) 的概述。对于旧版本或具体版本的细节差异，请参考该项目对应的文档和 README 文件。

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