将参数传递给使用 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 是硬编码字符串时，我可以毫无问题地让查询按预期运行。当我尝试传入一个参数来创建动态网址时，我遇到了无法访问该参数的问题；特别是“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