如何使用 React Query 将关键字搜索到 api答案

【问题标题】：How to search keyword into api with React Query如何使用 React Query 将关键字搜索到 api
【发布时间】：2022-01-13 22:53:04
【问题描述】：

如何在我的 axios 获取请求中使用参数中的“关键字”？我的方法不起作用，

// 前端代码

const ComprasLista = () => {
  const { keyword } = useParams();
  

  const compras = useQuery("compras", ({ keyword = "" }) => {
    return axios
      .get(`https://582821e.sse.codesandbox.io/api/compras?keyword=${keyword}`)
      .then((res) => res.data);
  });

  
  // 
};

export default ComprasLista;

// 后端代码

router.get(
  "/",
  asyncHandler(async (req, res) => {
    const keyword = req.query.keyword
      ? {
          fornecedor: {
            $regex: req.query.keyword,
            $options: "i"
          }
        }
      : {};
    const compras = await Compras.find({ ...keyword });
    res.json(compras);
  })
);

【问题讨论】：

标签： node.js reactjs axios react-query get-request

【解决方案1】：

查询的参数应该转到您的 queryKey，然后将其传递给您的查询函数：

const fetchCompras = ({ queryKey: [,keyword] }) => {
    return axios
      .get(`https://582821e.sse.codesandbox.io/api/compras?keyword=${keyword}`)
      .then((res) => res.data);
  })

const ComprasLista = () => {
  const { keyword } = useParams();
  
  const compras = useQuery(["compras", keyword], fetchCompras);
 
};

当然你也可以直接关闭它，但重要的部分是将它放入查询键中，以便在键更改时自动重新获取：

const ComprasLista = () => {
  const { keyword } = useParams();
  
  const compras = useQuery(["compras", keyword], () => {
    return axios
      .get(`https://582821e.sse.codesandbox.io/api/compras?keyword=${keyword}`)
      .then((res) => res.data);
    })
  });
 
};

【讨论】：