import{QueryClientProvider}from'@tanstack/react-query';import{ReactQueryDevtools}from'@tanstack/react-query-devtools';importReactfrom"react";import{queryClient}from'./react-query/client';importRouterfrom'./Router';functionApp(){return(<React.StrictMode><QueryClientProvider client={queryClient}>...<...
数据流转不清晰: 其次就是全局状态优点很明显,任何地方都可以使用全局状态,避免了 props 钻取,但是缺点也很明显,数据流转不清晰,因为它是全局的,这就意味着在哪个组件都可以修改它,永远不知道在某一个组件的某一段更新全局状态的代码会有问题,所以 debug 的方式就是一堆console.log或者查看 devtools(如果有的话)。
React Query 还提供了许多插件,可以扩展其功能,例如: react-query/devtools:提供一个 React DevTools 面板,用于查看 React Query 的缓存和请求。 react-query/hydration:在 SSR 应用程序中自动提取数据并在客户端上进行缓存。 react-query/persistCache:将缓存存储在本地存储中,以便在刷新后重新加载。 2.安装和配置 ...
One of the models that I am caching with React Query is a BigInt type. Unfortunately, when I try and inspect the data in the devtools explorer, I get an uncaught error: TypeError: Do not know how to serialize a BigInt. To Reproduce Steps to reproduce the behavior: Add an object using...
在devtools中我们可以直观的看到已经缓存下来的数据和整个项目的配置,以及各个接口的状态等。 3 总结 感谢你能看到这里,本文简单介绍了React-Query对服务端数据进行增删改查的功能实现,以及React-Query的一些其他能力,希望对你有用,React-Query的使用场景没有其他状态管理库那么广泛,但还是能解决很多服务器拉取数据的痛...
默认情况下,当process.env.NODE ENV === 'production' 时开启 Devtools ,不必担心构建时需要排除他们 浮动模式下开启,会将devtools作为固定的浮动元素安装在开发的应用程序中,并在屏幕一角提供一个切换按钮以显示和隐藏devtools 在devtools中我们可以直观的看到已经缓存下来的数据和整个项目的配置,以及各个接口的状态等...
上面的示例代码中,我们引入并设置了ReactQueryDevtools组件的initialIsOpen属性,因此将会默认打开调试工具 接着我们开始请求接口,你可以在调试工具中看到当前所有缓存状态的概览,如下图所示: 你也可以打开在线演示观察,在例子中点击【刷新】按钮,来观察缓存状态的变化。 fresh(最新)数据及stale(老旧)数据 react-query是否...
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize...
npm i -D @tanstack/react-query-devtools 你也可以使用yarn或者pnpm安装。 @tanstack/react-query– 此包是 React Query 的 React 绑定库。它提供hook和组件以将 React Query 与 React 应用程序集成。 @tanstack/eslint-plugin-query– 这是专为 React Query 设计的 ESLint 插件。它提供了 ESLint 规则,以...
为此,首先安装react-query-devtools, npm i --save react-query-devtools 现在我们可以将其导入App.js并添加到项目中,如下所示: importReact from"react";import'./app.css';import{useQuery}from"react-query";import{ReactQueryDevtools}from"react-query-devtools";constfetchUsers=async()=>{constres=awaitfet...