我试图定期运行一个查询,但不是当页面不对焦时。
正如我从react query的API ()中了解到的,我所需要做的就是向查询中添加一个refetchIntervalInBackground标志,以停止后台的常规重取:
refetchIntervalInBackground: boolean Optional If set to true, queries that are set to continuously refetch with a refetchInterval will continue to refetch while their tab/window is in the ba
我正在浏览一个现有的代码库,查看一些使用的数据获取钩子。
我注意到,几乎在任何地方,都会注意到在useQuery钩子(和其他类似的react-query钩子)中传递的参数在钩子执行之间是相同的。
例如
//custom_data_fetching_hook.js
import { useQuery } from 'react-query';
function fetchSomeStuff() {
// server data request implementation
}
const queryOptions = {
// object as described
我开始从事一个项目,使用react作为前端框架,这是一个很好的过程,有大量的文档,并准备使用插件。但我仍在努力理解这两段代码之间的区别
import {useQuery} from "react-query";
import {GET_CURRENT_USER_QUERY} from "../sections/shared/user/requests/user-requests";
import {useContext, useEffect} from "react";
import {ClientContext} from "../co
我有像这样的组件树: <App>
<Loader show={...}/>
<Form>
<input name="val" />
<input type="submit" />
</Form>
<Data input={...}>
Data is {here is data fetched for props.input}
</Data>
</App> 我在我的Data组件中使用reac
目标
我正在构建一个NextJS应用程序,它使用react query来获取数据。
我现在正在尝试实现一个测试框架。但是,当我运行yarn test时,我会看到下面的错误。从react查询文档中,我了解到错误通常与<QueryClientProvider>未包含在_app.js中的情况有关。
我怀疑我需要在index.test.js中引入一些“模拟数据”来进行react查询,但是还没有找到关于如何这样做的文档。
错误
No QueryClient set, use QueryClientProvider to set one
代码
/tests/index.test.js
impo
我们在到处使用Next.js和react-query。我们要做的是设置一个全局查询,当对端点的调用由于访问令牌过期而失败时,它会刷新令牌并重新运行查询。
错误模式应该是用户被重定向到登录。在使用内置于react-query's的onError和重试设置方面,我们已经取得了很大的进展。
使用自定义函数,我们可以刷新令牌,然后再重试原始请求。但是,在再次尝试之后,我们希望将用户重定向到登录页面。为此,我们需要来自useRouter的Next,这是一个钩子。useQuery in react-query也是钩子。
有没有办法将这两者结合起来,这样我们就可以在onError of QueryC
我相信我在实现测试时遵循了,但由于超时而失败了。
它总是说它正在加载,但是函数会立即返回(不管它是返回一个承诺还是一个值似乎没有什么区别)。
import React from 'react';
import { useInfiniteQuery, QueryClientProvider, QueryClient, useQuery } from '@tanstack/react-query'
import { renderHook, act } from '@testing-library/react-hooks'
function us
好的,这个问题不是很精确,但是我想不出更好的方法来表达:react-查询不像预期的那样。我创建了一个尽可能接近文档的最小示例,以排除所有其他可能的错误来源。在这个示例中,我呈现两个组件,一个尝试使用react查询,另一个使用普通的旧useEffect和useState钩子。
import ReactDOM from 'react-dom/client';
//the import from react-query is where the first error appears: 'Could not find a declaration file for module
我有服务器端呈现的基本设置和react设置,它的工作方式与预期的一样。我知道react query在客户端维护一个缓存,如果特定的查询键是新的并且它存在的话,它可以从这个缓存中服务器数据。这个装置看起来是这样的-
// pages/_app.tsx
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider, Hydrate } from "react-query";
function MyApp({ Component, pageProps }: A