将参数传递给使用 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), 以便编写一些我可以与 react-query 一起使用的基于 axios 的查询函数.当端点的 url 是硬编码字符串时，让查询按预期运行没有问题。当我试图传入一个参数来制作动态 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 }) => {
    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)

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

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

Answer 2

我正在使用以下（打字稿）将参数发送到我的自定义 useQuery 挂钩。

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