React-Query：单击按钮时如何使用Query

Question

我是这个反应查询的新手库的。

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

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

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

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

Answer 1

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

// 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>
);

在这里工作沙箱。
 

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

// 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,
  }
)

Answer 2

您必须传递manual: true参数选项，以便查询不会在挂载时获取。另外，您应该fetchData在不带括号的情况下传递，因此您传递的是函数引用而不是值。要调用查询，请使用 refetch()。

const {status, data, error, refetch} = useQuery(myKey, fetchData, {
      manual: true,
    });

const onClick = () => { refetch() }

有关更多信息，请参阅react-query文档上的手动查询部分 https://github.com/tannerlinsley/react-query#manual-querying

Answer 3

首先，反应查询为我们提供了启用选项，默认情况下它是 true

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

const {status, data, error , refetch} = useQuery(myKey, fetchData() , {
enabled : false
}
);

<button onClick={() => refetch()}>Refetch</button>

Answer 4

有两个问题refetch()：

• 即使响应已被缓存并且staleTime尚未过期，它也会向服务器发送请求
• 你不能将参数传递给它

onClick如果您需要对类似or 的事件进行查询onChange，请使用queryClient.fetchQuery()。

function MyComponent() {
  const queryClient = useQueryClient();

  const handleOnClick = async () => {
    const data = await queryClient.fetchQuery({ queryKey, queryFn });
  }

  return <button onClick={handleOnClick}>My Button</button>;
}

您可以看到创建者和当前维护者推荐这种方法。

Answer 5

看起来文档已更改并且现在缺少手动查询部分。但是，查看 useQuery API，您可能需要设置enabled为 false，然后refetch在按下按钮时使用手动查询。force: true无论数据新鲜度如何，您还可能希望使用它进行查询。