标签: react-query

想象一下当您有项目列表和项目视图时的典型用例。

所以有一个端点来获取所有项目。但您也可以使用 获取单个项目/items/:id。

但是，如果已从端点获取单个项目，则可以避免获取该项目/items。那么你会如何处理呢react-query？

function Items() {
  cosnt itemsQuery = useQuery('items', fetchItems);
  // render items
}
      
function SingleItem({ id }) {
  // you can have another query here and refetch item from server
  // but how to reuse an item from query cache and fetch only if there is no such item?
}

我正在尝试测试 useQuery 挂钩。测试 (expect(screen.getByText(/Loading.../)).not.toBeInTheDocument()) 似乎失败。我只是不断在 dom 中加载文本，而不是标题。尽管mockResolved已被分配/知道为什么会发生这种情况吗？整个目标是测试 isLoading 和 isError。下面是代码

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

应用程序

import React, { useState, Fragment } from "react";
import { useQuery } from "react-query";
import { getManagers } from "./api/index";
import CustomInputSelect from "./components/CustomInputSelect";
import { processEmployeeData } from "./utils/index";
import "./App.scss";

const App …

我有三种不同的数据类型：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 { …

我已阅读有关查询无效的反应查询文档。然而，它似乎对我不起作用。这是代码：

import React from "react";
import ax from "axios";
import { useQueryClient, useQuery } from "react-query";

export default function App() {
  const queryClient = useQueryClient();
  const [poke, setPoke] = React.useState("pikachu");
  
  const getPokemon = async (id) => {
    try {
      const pokemon = await ax.get("https://pokeapi.co/api/v2/pokemon/" + id);
      return pokemon;
    } catch (err) {
      throw new Error();
    }
  };

  const { data, isLoading, isError } = useQuery(
    ["get-pokemon", poke],
    () => getPokemon(poke),
    { cacheTime: 100000000 }
  );

  const getGengar = () => …

我正在使用 React Query（第一次）来管理对 API 的调用。我正在获取发票列表，到目前为止我已经在下面的代码中成功完成了此操作。我现在想根据每个发票对象具有的状态属性（它是“已付款”、“待处理”或“草稿”）使用一系列复选框来过滤此列表。

我该怎么办呢？过滤是否可以以某种方式集成到对 API 的初始调用中，以便我始终接收一组数据，或者我是否必须进行多次调用并在下面相应地呈现数据？

import React from 'react'
import {useQuery} from 'react-query'
import InvoiceLink from './InvoiceLink'

const fetchData = async () => {
    const res = await fetch('http://localhost:3004/invoices');
    return res.json();
};


export default function InvoiceList() {
    const {data, isLoading, isError} = useQuery('invoices', fetchData);
    return (
        <div>
            <ul>
                <li><input type="checkbox" id="paid"></input><label htmlFor="paid">Paid</label></li>
                <li><input type="checkbox" id="pending"></input><label htmlFor="pending">Pending</label></li>
                <li><input type="checkbox" id="draft"></input><label htmlFor="draft">Draft</label></li>
            </ul> 
            {isError && (
                <p>Error</p>
            )}
            {isLoading && (
                <p>Loading</p>
            )}
            <ul>
            {data && data.map(item => 
                <InvoiceLink …

我正在使用react-query库，我查了一下，useQuery可以使你的react组件重新渲染，因为它有状态，但奇怪的是，当我更改选项卡时它会重新渲染（例如，我去youtube，然后返回我的应用程序，该组件刚刚重新渲染）。但它只发生在 useQuery 中，我不明白为什么。

编辑：当我单击控制台然后再次单击应用程序时也会发生这种情况

代码很简单：

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/")
);
console.log(data);

这确实正在发生。每次我返回应用程序时，它都会再次记录数据。我不知道我错过了什么

当react-query中突变失败时，如何重试？\n如果有错误，我想重试突变3次。

我读过坦纳提到的这篇文章you\xe2\x80\x99ll have to build your own promise retry wrapper.，但是，我该怎么做呢？

我的职能是：

const [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，并且由于多种原因更新反应查询不可行。

创建时，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 }, …