React-Query:单击按钮时如何使用Query [英] React-Query: How to useQuery when button is clicked

问题描述

我是这个 react-query 库的新手.

我知道当我想获取数据时，使用这个库我可以做这样的事情:

const fetchData = async()=>{...}//它开始使用这行代码从后端获取数据const {status, data, error} = useQuery(myKey, fetchData());

它有效.但是如何仅在单击按钮时触发数据获取?，我知道我可能可以做类似 <Button onPress={() =>{useQuery(myKey, fetchData())}}/> ，但是如何管理返回的数据和状态...

解决方案

根据 API 参考，您需要将 enabled 选项更改为 false 以禁用查询自动运行.然后你手动重新获取.

//模拟 axios/fetch 因为 useQuery 需要一个 Promiseconst emulateFetch = 异步 _ =>{返回新的承诺(解决 => {解决([{数据:确定"}])；});};const handleClick = () =>{//手动重新获取重新获取()；};const { data, refetch } = useQuery(key", emulateFetch, {refetchOnWindowFocus: 假，enabled: false//默认关闭，需要手动重新获取});返回 (<div><button onClick={handleClick}>点击我</button>{JSON.stringify(数据)}

);

工作沙箱此处.

奖励:您可以将任何返回布尔值的内容传递给 enabled.这样你就可以创建Dependant/Serial 查询.

//获取用户const { 数据:用户 } = useQuery(['user', email], getUserByEmail)//然后获取用户的项目const { isIdle, 数据:项目 } = useQuery(['项目'，user.id]，getProjectsByUser，{//`user` 一开始会是 `null`(假)，//所以在用户存在之前查询不会执行启用:用户，})

I am new to this react-query library.

I know that when I want to fetch data, with this library I can do something like this:

const fetchData = async()=>{...}

// it starts fetching data from backend with this line of code
const {status, data, error} = useQuery(myKey, fetchData());

It works. But how to trigger the data fetching only when a button is clicked? , I know I probably could do something like <Button onPress={() => {useQuery(myKey, fetchData())}}/> , but how to manage the returned data and status...

解决方案

According to the API Reference, you need to change the enabled option to false to disable a query from automatically running. Then you refetch manually.

// emulates axios/fetch since useQuery expectes a Promise
const emulateFetch = async _ => {
  return new Promise(resolve => {
    resolve([{ data: "ok" }]);
  });
};

const handleClick = () => {
  // manually refetch
  refetch();
};

const { data, refetch } = useQuery("key", emulateFetch, {
  refetchOnWindowFocus: false,
  enabled: false // turned off by default, manual refetch is needed
});

return (
  <div>
    <button onClick={handleClick}>Click me</button>
    {JSON.stringify(data)}
  </div>
);

Working sandbox here.
 

Bonus: you can pass anything that returns a boolean to enabled. That way you could create Dependant/Serial queries.

// Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)
 
// Then get the user's projects
const { isIdle, data: projects } = useQuery(
  ['projects', user.id],
  getProjectsByUser,
  {
    // `user` would be `null` at first (falsy),
    // so the query will not execute until the user exists
    enabled: user,
  }
)

这篇关于React-Query:单击按钮时如何使用Query的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！