React Query Kit 使用教程

React Query Kit 使用教程

react-query-kit🕊️ A toolkit for ReactQuery that make ReactQuery hooks reusable and typesafe项目地址:https://gitcode.com/gh_mirrors/re/react-query-kit

项目介绍

React Query Kit 是一个为 React Query 设计的工具包，旨在使 React Query 钩子可重用和类型安全。它提供了一系列工具，帮助开发者更高效地管理查询键、操作查询客户端，并确保类型安全。React Query Kit 支持 TypeScript，并提供了丰富的功能，如中间件支持、类型推断等。

项目快速启动

安装

首先，你需要安装 React Query Kit。你可以使用 npm 或 yarn 进行安装：

npm install react-query-kit
# 或者
yarn add react-query-kit

基本使用

以下是一个简单的示例，展示如何使用 React Query Kit 创建一个查询钩子：

import { createQuery } from 'react-query-kit';

type Data = {
  projects: { id: string, name: string }[];
  nextCursor: number;
};

type Variables = {
  active: boolean;
};

const useProjects = createQuery<Data, Variables>({
  queryKey: ['projects'],
  fetcher: async ({ active }, { pageParam = 0 }) => {
    const response = await fetch(`/projects?cursor=${pageParam}&active=${active}`);
    return response.json();
  },
  getNextPageParam: (lastPage) => lastPage.nextCursor,
  initialPageParam: 0,
});

const variables = { active: true };

export default function Page() {
  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = useProjects(variables);

  return (
    <div>
      {data?.pages.map((group, i) => (
        <React.Fragment key={i}>
          {group.projects.map(project => (
            <div key={project.id}>{project.name}</div>
          ))}
        </React.Fragment>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? '加载更多...' : hasNextPage ? '加载更多' : '没有更多'}
      </button>
    </div>
  );
}

应用案例和最佳实践

中间件使用

React Query Kit 支持中间件，可以在查询钩子中插入自定义逻辑。以下是一个使用中间件的示例：

import { createQuery } from 'react-query-kit';

const loggerMiddleware = (useQueryNext) => {
  return (options) => {
    const log = console.log;
    const fetcher = (variables, context) => {
      log('查询键:', context.queryKey, '变量:', variables);
      return options.fetcher(variables, context);
    };
    return useQueryNext({ ...options, fetcher });
  };
};

const useUser = createQuery({
  queryKey: ['user'],
  fetcher: async (variables) => {
    const response = await fetch('/user', {
      method: 'POST',
      body: JSON.stringify(variables),
    });
    return response.json();
  },
  use: [loggerMiddleware],
});

类型安全

React Query Kit 通过 TypeScript 提供了类型安全保障。在创建查询钩子时，它会自动推断数据和变量的类型：

import { createQuery } from 'react-query-kit';

type Data = {
  user: { id: string, name: string };
};

type Variables = {
  id: string;
};

const useUser = createQuery<Data, Variables>({
  queryKey: ['user'],
  fetcher: async (variables) => {
    const response = await fetch(`/user/${variables.id}`);
    return response.json();
  },
});

典型生态项目

React Query Kit 可以与以下生态项目结合使用，以提供更强大的功能：

1. React Router: 结合 React Router 实现路由级别的查询管理。
2. Redux: 与 Redux 结合，实现全局状态管理。
3. Apollo Client: 与 Apollo Client 结合，实现 GraphQL 查询管理。

通过这些生态项目的结合，React Query Kit 可以更好地满足

react-query-kit🕊️ A toolkit for ReactQuery that make ReactQuery hooks reusable and typesafe项目地址:https://gitcode.com/gh_mirrors/re/react-query-kit