如何在typeScript和reactQuery中传递props到外部异步组件?

Question

我在next.js中有传递道具到外部组件的问题我对

行有问题

const { isLoading, data, error } = useQuery("products", getProducts(1));

getProducts(1)→我应该如何将props传递给这个组件?

页面:

import { useQuery } from "react-query";
import { getProducts } from "../components/task-1/getProducts-0";
export const ProductsPage = () => {
const { isLoading, data, error } = useQuery("products", getProducts(1));
if (isLoading) {
return <div>Loading...</div>;
}
if (!data || error) {
return <div>Error#!</div>;
}
return <>...</>;
};
export default ProductsPage;

组件:

export const getProducts = async (id: number) => {
const rest = await fetch(
`https://fakestoreapi.com/products/${id}`
);
const data: ProductApi[] = await rest.json();
return data;
};
interface ProductApi {
id: number;
title: string;
price: number;
description: string;
category: string;
image: string;
rating: Rating;
}
interface Rating {
rate: number;
count: number;
}

Answer 1

你能进一步解释一下问题是什么吗?不太清楚哪里出了问题，以及你期望发生什么

编辑:我明白问题所在了。你实际上是调用调用useQuerygetProducts函数。你应该传递一个函数给useQuery。如果您希望能够参数化函数，那么您应该创建所谓的闭包，如下所示:

const getProducts = (id: number) => {
return async () => {
const rest = await fetch(`https://fakestoreapi.com/products/${id}`);
const data: ProductApi[] = await rest.json();
return data;
}
}

这里发生的事情是，我返回一个异步函数，当调用时从API获取数据，这是我想传递给useQuery的函数

Answer 2

useQuery("products", getProducts(1))

这段代码将在呈现期间调用函数getProducts(1)，而不是将函数传递给react-query——实际上是将函数的结果传递给react-query。大多数例子使用内联函数:

useQuery("products", () => getProducts(1))

现在react-query得到一个可以调用的函数。

此外，理想情况下，id应该是queryKey的一部分，因为它是它的依赖项:

const id = 1
useQuery(["products", id], () => getProducts(id))

如果您这样做，您还可以潜在地利用这个事实，即react-query将把查询键注入到您传递给它的函数中:

useQuery(["products", 1], ({ queryKey }) => getProducts(queryKey[1]))

最好的做法是只让你的查询函数依赖于queryKey内部的东西。