如何正确地向使用 Axios 的 React-query useQuery 方法传递参数

Question

我目前正在构建一个使用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为硬编码字符串时，我没有问题使查询的行为符合预期。当我尝试传递参数以创建动态URL时，我遇到了无法访问该参数的问题，具体来说是“prodId”参数。但是我注意到“prodId”位于“key”参数数组中，如下所示：

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

我可以直接从那里访问它，但这种方法似乎有点奇怪。我也没有找到任何尝试从查询键数组中访问参数的示例或文档。关于传递参数，我想知道我做错了什么？在react-query中是否有一些语法更改我没有考虑到？

react-query@^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 }) => {
    console.log(opid)
    const { data } = await axios.get(`/api/v1/products/${prodId}`)
    return data
}

- humbledev7000

Answer 1

你传递给 react-query 的查询函数会注入一个 queryContext 对象，其中包含查询键（如果你正在使用无限查询，则还有一些其他信息）。因此，是的，访问依赖项的一种正确方式是通过查询键：

export const getProduct = async ({ queryKey }) => {
    const [_, prodId] = queryKey
    const { data } = await axios.get(`/api/v1/products/${prodId}`)
    return data
}
const { data } = useQuery(['product', prodId], getProduct)

另一种方法是使用内联匿名函数，这在文档中有很好的记录：如果您的查询函数依赖于一个变量，请将其包含在查询键中

export const getProduct = async (prodId) => {
    const { data } = await axios.get(`/api/v1/products/${prodId}`)
    return data
}
const { data } = useQuery(['product', prodId], () => getProduct(prodId))

- TkDodo

---

阅读文档后，我实际上尝试了这种方法，但在我的迭代忙碌中，可能没有为内联语法提供正确的查询函数参数签名。非常感谢。 - humbledev7000

如何在useInfiniteQuery中传递查询上下文以及用于获取下一页的pageParam参数？ - KarthikNayak98

它的工作方式完全相同。pageParam只是上下文中的另一个字段，您可以像解构queryKey一样解构它，并且它将根据您从getNextPagePraam返回的内容由react-query填充。 - TkDodo

@SunnyPatel 我不知道你缺少什么 - 我甚至不知道你的问题是什么... - TkDodo

第二种方法如何与params对象一起使用？例如：useQuery( ... , {onError:(error)=>{...}}) - Bersan

Answer 2

我正在使用以下（TypeScript）将参数发送到我的自定义 useQuery hook。

import { useQuery } from 'react-query'
import service from '../api'

const queryKey = 'my-query-key'
type useProductsParams = Parameters<typeof service.listProducts>

const useProducts = (...params: useProductsParams) => {
  return useQuery(queryKey, () => service.getProduct(...params))
}

export default useProducts

- Gabriel Brito

---

根据QueryKeys的文档，键必须是一个数组。来自文档：查询键必须在顶层是一个数组，并且可以是一个只包含单个字符串的简单数组，也可以是包含许多字符串和嵌套对象的复杂数组。 - MauricioLeal