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

Question

我目前正在使用 React 前端在 Rails Webpacker 应用程序上构建 Ruby。我正处于我想要创建调用我的 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 是硬编码字符串时，让查询按预期运行没有问题。当我试图传递一个参数来使 urls 动态化时，我运行陷入了无法访问所述参数的问题；特别是“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 }) => {
    console.log(opid)
    const { data } = await axios.get(`/api/v1/products/${prodId}`)
    return data
}

Answer 1

您传递给 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', prodId], () => getProduct(prodId))

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

What is the correct way to pass parameters to a React-query useQuery method that uses Axios

ruby-on-rails

reactjs

axios

webpacker

react-query