react-query 动态参数个数

Question

我将在电子商务页面上使用产品过滤器。我不确定如何在查询中传递动态数量的参数？因为有时会查询使用1个参数有时6个甚至更多。

示例

const fetchProducts = async (size, color, weight, deep,) => {
  const parsed = await ky(
    `http://localhost:3000/api/products/get?size=${size}&color=${color}`
  ).json();

  return parsed;
}; 


  const { data, status } = useQuery([size, color,], () => fetchPosts(size, color));

有时会有 10 个来自产品过滤器的不同参数，有时只有 1 个...

我该如何动态处理这个问题？然后我需要将过滤器放在 prisma 后端。

Answer 1

您可以使用 qs 包来处理所有参数。

示例：

const fetchProducts = (params)=>{
 const query = qs.stringify(params);
 const baseUrl = "http://localhost:3000/api/products/get?";
 const parsed = await ky(baseUrl + query);
....
}

const params = {color:"red", size:"big"}
const query = qs.stringify(params);
//output: "color=red&size=big"

react-query 动态参数个数

react-query dynamic number of parameters

javascript

reactjs

next.js

react-query