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

bsxbgnwa 于 2023-04-05 发布在 React

关注(0)|答案(2)|浏览(189)

我目前正在构建一个带有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
}

reactjs

来源：https://stackoverflow.com/questions/68105012/what-is-the-correct-way-to-pass-parameters-to-a-react-query-usequery-method-that

2条答案

按热度按时间

nkoocmlb1#

你传递给react-query的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))

赞(0）回复(0）举报 2023-04-05

4dc9hkyq2#

我使用下面的（typescript）将参数发送到我的自定义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

赞(0）回复(0）举报 2023-04-05

我来回答

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

2条答案

相关问题

热门标签

最新问答