我有三种不同的数据类型：Books、Authors和Publishers。我使用react-query来获取每种类型的列表，即useBooks(bookIds)，，，当我尝试彼此独立地使用它们时，这非常有用useAuthors(authorIds)。usePublishers(publisherIds)
authorIds但是，一本书有和的列表publisherIds，我想将Publishers和Authors对象加入到Books。我无法找出使用反应查询执行此操作的正确方法。理想情况下，我希望能够调用所有三个钩子，等待它们的响应，然后将其作为一个大钩子返回。然而，我无法专心去做这件事。
我尝试的一种实现是使连接数据的每个钩子依赖Book于前一个钩子的结果。这工作正常；然而，这样做的一个大问题是连接是彼此异步完成的；一旦返回数据，组件消耗的数据就不能期望 aBook具有 aAuthor或。Publisher这是一个例子：
const usePopulatedBooks = (bookIds) => {
const booksQuery = useBooks(bookIds);
const {data: books} = booksQuery;
const authorIds = [];
const publisherIds = [];
if (books) {
books.forEach(book => {
authorIds.push(book.authorId);
authorIds.push(book.publisherIds);
})
}
// Who knows when this finishes?
const {data: authors} = useAuthors(authorIds);
// Who knows …我正在构建一个使用 React-query 来获取数据的 NextJS 应用程序。
我现在正在尝试实现一个测试框架。但是，当我运行时yarn test，出现以下错误。从react-query文档中，我了解到错误通常与<QueryClientProvider>未包含在_app.js.
我怀疑我需要为反应查询引入一些“模拟数据”，index.test.js但无法找到有关如何执行此操作的文档。
No QueryClient set, use QueryClientProvider to set one
/测试/index.test.js
No QueryClient set, use QueryClientProvider to set one
/pages/index.js
import { render, screen } from '@testing-library/react';
import Home from '../pages/index';
describe('Home', () => {
it('renders without crashing', () => {
render(<Home />);
expect(
screen.getByRole('heading', { name: 'Welcome to Next.js!' })
).toBeInTheDocument();
});
});
/pages/_app.js
import Link from 'next/link';
import { …我已经开始使用 React-Query，如果我只需要从我的数据库中的单个集合中获取数据，它会非常有效。但是，我正在努力寻找一种查询多个集合以在单个组件中使用的好方法。
一个查询（没问题）：
const { isLoading, isError, data, error } = useQuery('stuff', fetchStuff)
if (isLoading) {
return <span>Loading...</span>
}
if (isError) {
return <span>Error: {error.message}</span>
}
return (
<ul>
{data.map(stuff => (
<li key={stuff.id}>{stuff.title}</li>
))}
</ul>
)
}
对不同集合的多个查询 ()：
const { isLoading: isLoadingStuff, isError: isErrorStuff, data: stuff, error: errorStuff } = useQuery('stuff', fetchStuff);
const { isLoading: isLoadingThings, isError: isErrorThings, data: Things, error: errorThings } = useQuery('things', fetchThings);
const { isLoading: isLoadingDifferentStuff, isError: isErrorDifferentStuff, data: DifferentStuff, error: errorDifferentStuff } = …当react-query中突变失败时，如何重试？\n如果有错误，我想重试突变3次。
\n我读过坦纳提到的这篇文章you\xe2\x80\x99ll have to build your own promise retry wrapper.，但是，我该怎么做呢？
我的职能是：
\nconst [accessSelectPage, accessSelectPageInfo] = useMutation(\n () =>\n axios.post(\n POST_ACCESS_SELECT_PAGE_EP(token ?? \'\'),\n {},\n {\n headers: { \'X-Campaign-ID\': campaignID }\n }\n ),\n {\n onSuccess: (responseOnSuccess) => {\n console.log(\'accessSelectPage\', responseOnSuccess)\n },\n onError: (error) => {\n console.log(\'accessSelectPage error\', error)\n }\n }\n )\n注意：是的，我知道 v3 有一个“重试”选项，但我正在使用 v2，并且由于多种原因更新反应查询不可行。
\n创建时，queryClient我想创建一个全局onError处理程序，当错误响应代码为 401 时刷新我的访问令牌。但我不知道如何在onError处理程序中返回的错误上访问状态代码。
下面是我的全局onError处理程序，我只需要访问 if 语句中的响应代码即可在适当的时间刷新我的令牌。
const queryClient = new QueryClient({
queryCache: new QueryCache({
onError: async (error, query) => {
// How to get status code fo error
if (error.status === 401) {
console.log("Refreshing Token");
await api.get("/api/refresh-token");
queryClient.refetchQueries(query.queryKey);
}
},
}),
});
数据来自后端，我可以在网络选项卡中看到它，但是反应查询返回未定义的数据，它甚至没有对数据做出反应，因为它在控制台中返回错误的加载和获取，并且开发工具设置为新鲜(1) 。它之前可以工作，但现在似乎无法找到解决方案。
这是我的 App.js：
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
cacheTime: 0,
},
},
});
function App() {
return (
<QueryClientProvider client={queryClient} contextSharing={true}>
<PrivateRoute
exact
path="/dashboard/snp/match"
component={MatchedSequences}
/>
<ReactQueryDevtools initialIsOpen />
</QueryClientProvider>
);
}
导出默认应用程序；
这是我的组件：
const queryClient = useQueryClient();
const [showQuery, setShowQuery] = useState(false);
const [showSequence, setShowSequence] = useState(false);
const { isLoading, isFetching, error, data, status } = useQuery(
"dn",
() => {
fetch("/api/users/find").then((res) => {
return res.json();
});
},
{ keepPreviousData: false }, …所以我使用react-query来处理API请求。当前的问题是，当我尝试提交表单数据、发布请求时，突变状态始终处于空闲状态，并且加载始终为 false。我还使用 zustand 进行状态管理。
这是 useSubmitFormData 挂钩。Post 请求按预期执行，只是突变状态和 isLoading 没有改变。
export const useSubmitFormData = () => {
const { postDataPlaceholder } = usePlaceholderApi();
// data which is submiting is getting from the store - reducer
const { data, filesToUpload } = useFormDataStore();
const { mutate, status, isLoading } = useMutation(() => postDataPlaceholder({ data }), {
onMutate: () => console.log('onMutate', status),
onSuccess: (res) => console.log(res),
onError: (err) => console.log('err', err),
});
return {
submitForm: mutate,
isLoading,
};
};
现在在 FormPage.jsx 上它是这样触发的： …
所以我\xe2\x80\x99m使用React查询，我有一个突变，我有一个像这样的onSucess回调：
\nonSuccess: () => {\n return queryClient.invalidateQueries([FETCH_USER, userId]);\n}\n我想使另一个查询无效，我知道我可以这样做：
\nonSuccess: () => { \n queryClient.invalidateQueries([FETCH_USER, userId]);\n queryClient.invalidateQueries([FETCH_USER_BOOKS, userId]);\n}\n但是，如果我不使用返回值，那么它不会等待失效并将突变设置为完成。
\n有没有办法将返回值用于这两种失效？
\n我使用 useQuery 钩子向 graphql 端点发送请求，我使用react.js 和 next.js。此请求是为了在我的网站上显示项目列表。当我在 Chrome 浏览器的检查工具中检查网络选项卡时，请求正常，显示响应数据没有问题，但在控制台中，我收到以下错误：
查询数据不能是未定义的。请确保从查询函数中返回除 undefined 以外的值。受影响的查询键：[“newProjects”]
错误：在解析时 (retryer.mjs?bd96:54:1) 处的 Object.onSuccess (query.mjs?b194:316:1) 处未定义
我创建了一个钩子来发出请求并获取另一个组件中的数据：
import { useQuery } from "@tanstack/react-query";
import { request, gql } from 'graphql-request'
import { endpointProjects } from "../settings";
export function useAllProjects() {
return useQuery(
['newProjects'],
async () => {
const data = await request(
endpointProjects.newProjects,
gql`
query MyQuery {
newProjects(orderBy: blockTimestamp, orderDirection: desc, first: 10, skip: 0) {
id
project
name
symbol
uri
blockNumber
blockTimestamp
transactionHash
}
}
`,
) …我们在一个相当大的 React 站点上广泛使用了 ReactQuery，而且它运行良好，但我们最近看到了非常奇怪的行为，这种行为只发生在 Chrome 上，而且很少发生。对于useQuery我们每次调用，queryFn我们传入的内容永远都不会被调用。我通过以queryFn日志记录开始该函数来验证这一点，这在 Chrome 上从未发生过。 enabled被硬编码为true. 在 Edge 和 Firefox 上，日志记录发生，代码运行，应用程序一直都很好。我在 Chrome 之外还没有遇到过这个问题。我知道useQuery被调用是因为可以在reactQuery devtools中看到密钥。由于问题是在我的机器上开始的，所以它的发生完全一致，但目前仅在这台特定的机器上。团队中没有其他人可以复制它。此前，一位客户报告了同样的问题（同样仅在 Chrome 上），我们的各种故障排除（清除所有本地存储等）在问题自行解决之前没有取得成果。它以常规和隐身模式发生在我的本地主机服务器以及我们的开发服务器上，并且在清除本地存储、重新启动本地服务器、浏览器和计算机之后发生。无论如何，我们不会在本地保留任何reactQuery 缓存。升级到reactQuery 4.24.9 没有什么区别。团队中使用相同 Chrome 版本（Mac M1 版本相同）的同一开发服务器上没有其他人遇到此问题。如果有人觉得这听起来很熟悉，请插话。