将参数传递给使用 Axios 的 React-query useQuery 方法的正确方法是什么

如何解决将参数传递给使用 Axios 的 React-query useQuery 方法的正确方法是什么

我目前正在构建一个带有 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)，以便编写一些可以与 react-query 一起使用的基于 axios 的查询函数。当端点的 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
}

解决方法

您传递给 react-query 的查询函数会注入一个 queryContext，它是一个由 queryKey 组成的对象（如果您使用的是无限查询，还有更多信息）。所以是的，访问依赖项的一种正确方法是通过 queryKey：

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)

另一种方法是使用内联匿名函数，这在以下文档中有详细说明：If your query function depends on a variable,include it in your query key

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