标签: react-query

我是这个反应查询的新手库的。

我知道当我想获取数据时，使用这个库我可以做这样的事情：

const fetchData = async()=>{...}

// it starts fetching data from backend with this line of code
const {status, data, error} = useQuery(myKey, fetchData());

有用。但是如何仅在单击按钮时触发数据获取？，我知道我可能可以做类似的事情<Button onPress={() => {useQuery(myKey, fetchData())}}/>，但是如何管理返回的数据和状态...

因为这些可以从 npm 下载，并且它们的名称大小不同。在哪些场景下我们必须下载 tanstack React Query 以及针对哪些 React-Query。

我已阅读 React Query 文档。不过，我不明白如何使用 staleTime 和 cacheTime 进行数据缓存。

我想在第一次 API 调用后将数据存储在缓存中 2 分钟。无论组件是否挂载或卸载，我都不想在第一次获取数据后 2 分钟内调用 API。

我使用了这个，但如果我只使用过时时间，它在 2 分钟后不会调用 API ；如果我只使用缓存时间，它每次都会调用 API（挂载组件和卸载组件）。

那么，问题出在哪里呢？最好的方法是什么？

const query = useQuery(
  ["getUserList"], 
  getUserList, 
  {
    staleTime: 120000,
    cacheTime: 120000,
  }
);

我目前正在构建一个带有 React 前端的 Ruby on Rails Webpacker 应用程序。我现在想要创建调用 Rails API 所需的所有请求。我大致遵循本教程https://www.youtube.com/watch?v=0bKc_ch6MZY（https://github.com/daryanka/react-query-tutorial/blob/master/src/containers/Post.js，https://github.com/daryanka/react-query-tutorial/blob/master/src/Queries.js），为了编写一些基于 axios 的查询函数，我可以将其与react-query一起使用。当端点的 url 是硬编码字符串时，我可以毫无问题地让查询按预期运行。当我尝试传入一个参数来创建动态网址时，我遇到了无法访问该参数的问题；特别是“prodId”参数。然而，我确实注意到“prodId”位于“key”参数数组内，如下所示：

queryKey: Array(2)
0: "product"
1: "1"
length: 2
enter code here

我可以从那里访问它，但这种方法似乎有点不对劲，我也没有找到任何尝试从查询键数组访问参数的示例或文档。我想知道我在传递参数方面做错了什么？反应查询中是否有一些我没有考虑到的语法变化？

反应查询@^3.17.2

webpacker (5.2.1)

axios@^0.21.1

//Product.js

import axios from "axios"
import { getProduct } from "../../queries/products"
import { useQuery } from "react-query"

const prodId= '1'
const { data } = useQuery(['product', prodId], getProduct)

//queries/products.js
import axios from 'axios'

export const getProduct = async (key, { prodId }) => { …

每次用户按下“喜欢”按钮刷新所有查询时，我都试图使查询无效，但尽管遵循了文档，但到目前为止还没有成功。

我有一个获取数据的组件：

  const {
    data: resultsEnCours,
    isLoading,
    isError,
  } = useQueryGetEvents("homeencours", { currentEvents: true });

这是一个自定义钩子，如下所示：

const useQueryGetEvents = (nameQuery, params, callback) => {
  const [refetch, setRefetch] = React.useState(null);
  const refetchData = () => setRefetch(Date.now()); // => manual refresh
  const { user } = React.useContext(AuthContext);
  const { location } = React.useContext(SearchContext);

  const { isLoading, isError, data } = useQuery(
    [nameQuery, refetch],
    () => getFromApi(user.token, "getEvents", { id_user: user.infoUser.id, ...params }),
    // home params => "started", "upcoming", "participants"
    {
      select: React.useCallback(({ …

我正在使用反应测试库处理测试用例。为了编写测试用例，我需要模拟 React 查询的 useQuery 和 useMutation 方法。如果有人知道解决方案，请指导我。我在这里添加相关代码。

工作空间详细信息部分.test.tsx

import React from 'react'
import '@testing-library/jest-dom'
import '@testing-library/jest-dom/extend-expect'
import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { WorkspaceDetailsSection } from '../WorkspaceDetailsSection'
import { render } from '../../_utils/test-utils/test-utils'

const mockedFunction = jest.fn()

let realUseContext: any
let useContextMock: any

// Setup mock
beforeEach(() => {
  realUseContext = React.useContext
  useContextMock = React.useContext = jest.fn()
})
// Cleanup mock
afterEach(() => {
  React.useContext = realUseContext
})

jest.mock('../data', () => ({
  useMutationHook: () …

试图找到有关反应查询的答案。

useQuery 和 useMutation 之间有什么区别？

据我了解， useQuery 是依赖调用。

useMutation 用于需要更新当前状态的帖子（缓存失效等）

这是正确的假设吗？

我是 React Query 的新手，我有一个问题，我一直在查看文档，但我找不到应该如何访问已使用 useQuery() 从另一个组件获取的数据。

我正在const query = useQuery('todos', fetchFunction)从 HomeComponent 获取数据，并且想要访问已在 TodosComponent 中获取的数据。可以再次获取数据吗？const query = useQuery('todos', fetchFunction)或者是否有类似 redux 之类的东西，数据位于 Store 之类的东西中，以便我可以从任何地方访问它？

;)

在此代码片段中，当我将鼠标悬停在onSuccess回调上时，它表示它已被弃用并将在下一个主要版本中删除。onError和回调也会发生同样的情况onSettled。我该用什么来代替？

  const { isError, error, data, refetch, isFetching } = useQuery(
    ["posts"],
    fetchPosts,
    { enabled: false, onSuccess: () => {} }
  );

我正在学习react-query，遇到一些问题。我想使用data我通过获取数据得到的useQuery，但我得到data的是undefined。这是我的代码：

import React from "react";
import { useQuery } from "react-query";
import { fetchData } from "./providesData";
const Home = () => {
  const {data} = useQuery("fetchData", fetchData, {
    onSuccess: () => {
      console.log("Get data!");
      console.log(data); // undefined
    }
  });

  return <div></div>;
};

export default Home;

但我看到react-query devtools提取成功并且data在这里。所以我认为我没有正确访问回调data中的onSuccess。那么我们如何才能访问到data回调中的呢？我试过：

const query = useQuery("fetchData", fetchData, {
    onSuccess: () => {
      console.log("Get data!"); …