前言 最近参与新的项目了，发现项目居然使用了 @tanstack/react-query，以前之后简单介绍过，今天再来详细上手使用下！...@tanstack/react-query 往期精彩推荐 有了它，我放弃了 try-finally 代码块！ 原来在字节写代码就是这么朴实无华！...突变与更新（useMutation） useMutation 用于数据更新，如 POST 请求，支持乐观更新和回滚。...import React, { useState } from"react"; import { useQuery, useMutation, useQueryClient } from"@...解决了数据管理的痛点，通过 useQuery 和 useMutation 等钩子，让代码更简洁、更可靠。
通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...这个 hook 的结果有三个重要的属性： data：此属性包含查询函数的结果。请注意数据也可能为 undefined；这是因为在第一次调用时，当请求处于等待状态时，data 尚未呈现。...为了更好地在代码中理解突变是什么，让我们从一个代码片段开始 import { useMutation } from '@tanstack/react-query'; const postTodo =...以下是一个例子 import { useMutation, useQueryClient } from '@tanstack/react-query'; import { QUERY_KEY } from.../react-query/client'; import Router from '.
下面来看看react-query是如何把这件事变成乐趣的。...最后它会返回一个结果，结果里面包含请求的数据，加载状态，错误等，这样这个请求就把所有这些状态串联起来，而不是一堆散乱的状态，突然逻辑变得清晰了，你只需要根据这些状态处理页面，一切都简单了。...Mutations useMutation：用来创建、更新、删除数据，当你的接口涉及这些逻辑时你可以使用它。...使用useMutation hooks。...//例子来自官网 function App() { //创建一条todo的mutation请求 const mutation = useMutation(newTodo => { return
通常还包括： 缓存 将对同一数据的多个请求消除为一个请求 在后台更新“过期”数据 知道数据何时“过期” 尽快反映数据更新 性能优化，如分页和延迟加载数据 管理内存和服务器状态的垃圾收集 使用结构共享记忆查询结果...useMutation 除了获取数据，很多时候还需要处理数据的修改，比如说最简单的todo list例子，除了拉取数据列表，还需要增删改数据，而这个时候除了需要发送接口，还需要修改本地的数据，React-Query...提供了useMutation来帮我们完成这些事情。...中传入的方法，我们只需要调用mutate即可，传给mutate的参数都会被带到useMutation的构造方法中。...最后 感谢你能看到这里，本文简单介绍了React-Query对服务端数据进行增删改查的功能实现，以及React-Query的一些其他能力，希望对你有用，React-Query的使用场景没有其他状态管理库那么广泛
我们需要以下内容： 认证功能（登录、注销和访问已认证用户） 保护需要用户进行身份验证的资源 # 功能实现 # 登录 // src/features/auth/api/login.ts import { useMutation...} from "@tanstack/react-query"; import { apiClient } from "@/lib/api-client"; import { queryClient...const useLogin = ({ onSuccess }: UseLoginOptions = {}) => { const { mutate: submit, isLoading } = useMutation...Log in ); }; # 登出 // src/features/auth/api/logout.ts import { useMutation...const useLogout = ({ onSuccess }: UseLogoutOptions = {}) => { const { mutate: submit, isLoading } = useMutation
你可以从这里[2]看到他们的区别 初识React-Query React-Query是一个基于hooks的数据请求库。...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改 在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...userData', () => axios.get('/api/user')); // 新增用户 const {mutate} = useMutation(data => axios.post...const {mutate} = useMutation(userData => axios.post('/api/user', userData), { onSuccess: () => {...这样，React-Query就会重新请求userData对应query的数据。 总结 通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。
这个属性可以控制是否强制渲染，这也是为了解决，我们在刚打开时，组件未渲染导致报错的问题 同时我们也可以发现，我们在当中设置了三元判断，这样是为了优化我们的用户体验，前面也提过了，我们整个项目采用的是 react-query...这其实利用的是 useMutation 这个 react-query 中的原生 hook // 示例 return useMutation( (params: Partial)...简单的说，我们的页面信息会在服务器请求结果返回之前去更新，例如收藏按钮，如果我们的请求时间为 5s，那么不采用乐观更新，收藏的按钮就会在 5s 之后采用亮起，而采用乐观更新，则会默认的认为服务器返回的结果必然成功...这个 API 来实现乐观更新，会牵扯到 useMutation 生命周期的问题，我们封装一个 useConfig 来编写这些生命周期函数 在这个 hook 中我们使用了大量的 any ，无关大雅 我们在成功...-- 那么这部分的内容就到这里了，下一篇将会讲关于搜索部分的实现~ 总结 通过这篇文章我们可以学会以下这些内容 在 antd 组件的基础上封装新的组件 采用乐观更新优化体验 项目的增删查功能 采用 react-query
// src/lib/react-query.ts import { QueryClient } from "@tanstack/react-query"; export const queryClient...return { data, isLoading, }; }; 创建职位 // src/features/jobs/api/create-job.ts import { useMutation...} from "@tanstack/react-query"; import { apiClient } from "@/lib/api-client"; import { queryClient...} from "@/lib/react-query"; import type { Job, CreateJobData } from ".....useCreateJob = ({ onSuccess }: UseCreateJobOptions = {}) => { const { mutate: submit, isLoading } = useMutation
API客户端封装使用Axios和React Query：// src/api/studentApi.tsimport axios from 'axios';import { useQuery, useMutation...} from '@tanstack/react-query';const apiClient = axios.create({ baseURL: 'http://localhost:8080/api...{ params: { name } }).then(res => res.data), });};export const useCreateStudent = () => { return useMutation.../StudentList';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';test('renders
import React from 'react';import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query...DataComponent = () => { const { data, isLoading, isError } = useQuery('data', fetchData); const mutation = useMutation...我们使用useMutation钩子使用postData函数处理POST请求。useMutation返回的mutation对象包括一个mutateAsync方法，可用于触发变异。
其实在我们在遍历添加 kanbanColumns 组件时，只会发起一个请求，即使，我们给每一个 column 都绑定了 useTask 这是因为，我们采用的 react-query 的功劳，在我们采用...useAddKanban = (queryKey: QueryKey) => { const client = useHttp() // 处理 http 请求 return useMutation...删除看板 export const useDeleteKanban = (queryKey: QueryKey) => { const client = useHttp() return useMutation...只要调用即可，这里我们在 modal 中，绑定了 onOk 以及 onCancel 方法 这里有个值得注意的地方 我们这次采用的是 mutateAsync 异步执行，因此我们需要采用 await 进行等待执行结果...close() } ---- 总结 在这篇文章中我们做完了看板页面的制作，我们能学到这些东西 熟悉了增删改查的操作 了解了 useQuery 的用法 对 modal 组件有了更多的了解 了解了 react-query
但此时触发数据验证失败，响应的结果令人不是很满意。...下图为访问 /api/todo/xxx 的响应结果（其中 xxx 不为 cuid 格式，因此抛出数据验证异常) 所返回的响应体是完整的 zodError 内容，并且状态码为 400 提示 数据验证失败的状态码通常为...请求体与响应体的类型推导 配合 react-query 可以更好的获取类型安全。...from '@/lib/api-client' import { InferRequestType, InferResponseType } from 'hono/client' import { useMutation...} from '@tanstack/react-query' import { toast } from 'sonner' const $post = client.api.users.
After: TanStack Query的声明式写法 import { useQuery } from'@tanstack/react-query'; asyncfunction fetchProductsByCategory...应用初始化配置 只需在应用根部做一次配置： import { QueryClient, QueryClientProvider } from'@tanstack/react-query'; const...这里useMutation展现出了威力。...我们希望的体验是： 用户点击「添加」按钮 Todo立刻在列表上显示（不等待服务器） 后台发送请求到服务器 如果服务器成功，保持这个状态 如果服务器失败，自动回滚到之前的列表，显示错误提示 import { useMutation..., useQuery, useQueryClient } from'@tanstack/react-query'; function useTodos() { return useQuery({
状态爆炸（数据模型越来越复杂） 维护地狱 用 React Query 就对了： import { useQuery, useMutation } from'@tanstack/react-query'...queryKey: ['products'], queryFn: () => api.getProducts() }) // 更新购物车 const { mutate: updateCart } = useMutation...重构的结果怎样？
下面是使用 React Query 实现的相同示例： import React from "react"; import { useQuery } from "react-query"; import...要更改后端状态时，React Query 提供了 useMutation hook。...在 react-query 文档中也对这两个库进行了彻底的比较。 与 React Query 一样，SWR 也有真正可读的文档。
愿你忠于自己，热爱生活 在上一篇文章中我们已经写完了首页项目列表的展示部分，利用了大量的 custom hook 来处理对 url 进行操作，实现了将 query 映射到 url 的操作，同时利用 react-query...中的 useMutation 搭配实现了乐观更新的效果，同时利用 useDebounce 来减少请求，优化性能 接下来我们将处理一下其他的页面，在开发其他页面之前，我们先树立好骨架，先将页面的跳转以及
{todo.title} ))} ); }; 通过useQuery这个Hook函数，即刻进行查询返回结果...返回值是数组，第一个值是结果，结果包含data，fetching,error三个属性，分别代表数据结果，执行未完成和出错信息。...执行变更 与查询不一样的是，变更语句不会在调用useMutation这个Hook函数时立即执行，而是需要通过函数返回值的第二个元素（其是一个函数），传入数据调用以后才会请求执行。...import { useMutation} from 'urql'; const UpdateTodo = ` mutation ($id: ID!, $title: String!)...title } } `; const Todo = ({ id, title }) => { const [updateTodoResult, updateTodo] = useMutation
对于大部分前端应用而言，类型往往常被忽略的，这就导致不知道这个请求的提交参数、响应结果有什么数据字段。...useMutation() | tRPC tRPC 同样也支持 post 请求，例如 服务端代码 server/trpc.ts const appRouter = router({ createUser...通过 useQuery 和 useMutation 就能够用 tRPC 实现最基本的 CRUD。此外还有 useInfiniteQuery 可以用作类似无限下拉查询，类似 SWR 无限加载。...tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query，你也可以到 tRPC React Query documentation 查看相关 hook。...pnpm create t3-app@latest 安装过程如下 prisma 此时安装完先别急着 pnpm run dev 启动项目，首先执行 npx prisma db push 运行结果如下
作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？...所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。...前端框架能够识别SSR的结果，就能操作这个结果进行细粒度的HTML更新。...图片把这个模型套在数据同步的场景：之前，数据同步的逻辑主要发生在位于前端的React-Query中现在，数据同步的逻辑发生在后端既然数据同步的逻辑发生在后端，显然就不需要运行在前端的React-Query...没曾想，随着这些全栈框架的爆发，前端缓存库React-Query成为受伤最重的那个。这就是所谓的 —— 毁灭你，与你何干。
作为前端缓存库中的佼佼者，React-Query一直拥有大量受众，官方推出的React-Query课程都卖出了8w+份。 但就是这样一款能打的产品，居然有被淘汰的风险，这究竟是为什么？...所以当渲染任务逐渐移向后端，React-Query（或类似的库）便逐渐失去市场。 总结来说：取代React-Query的，并不是更先进的竞品，而是他存在的土壤正在逐渐消失。...前端框架能够识别SSR的结果，就能操作这个结果进行细粒度的HTML更新。...把这个模型套在「数据同步」的场景： 之前，「数据同步」的逻辑主要发生在位于前端的React-Query中 现在，「数据同步」的逻辑发生在后端 既然「数据同步」的逻辑发生在后端，显然就不需要运行在前端的React-Query...没曾想，随着这些全栈框架的爆发，前端缓存库React-Query成为受伤最重的那个。 这就是所谓的 —— 毁灭你，与你何干。
云服务器
ICP备案
对象存储
云直播
实时音视频
