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

Question

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

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

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())}}/>，但是如何管理返回的数据和状态......

score 71 · Accepted Answer

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

// emulates axios/fetch since useQuery expectes a Promise
const emulateFetch = _ => {
  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. 这样您就可以创建依赖/串行查询。

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

score 9 · Accepted Answer

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

score 6 · Accepted Answer

您必须传递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

score 1 · Accepted Answer

如果您想触发多次重新获取，还有另一种方法可以做到这一点。

const [fetch, setFetch] = useState(null);
const query = useQuery(["endpoint", fetch], fetchData);

const refetch = () => setFetch(Date.now());

// call the refetch when handling click.

如果你想重新获取多个实体，你可以有一个顶级的 useState ，例如 fetchAll 和：

...
const query = useQuery(["endpoint", fetch, fetchAll], fetchData);
...

如果您按下按钮获取所有内容，此代码也会触发。

score 0 · Accepted Answer

你可以试试这个版本：

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

// it starts fetching data from backend with this line of code
const {status, data, error, refetch } = useQuery(
myKey, 
fetchData(),
{
  enabled: false,
}
);
const onClick = () => { refetch() }
// then use onClick where you need it

从文档文档：

enabled: boolean

将此设置为 false 以禁用此查询自动运行。
可用于从属查询。

refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>

手动重新获取查询的功能。
如果查询错误，则只会记录错误。如果要抛出错误，请传递throwOnError: true option
如果cancelRefetch是true，则当前请求将在发出新请求之前被取消

score -3 · Accepted Answer

你可以使用 useLazyQuery()

import React from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
   const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);

   if (loading) return <p>Loading ...</p>;
   if (error) return `Error! ${error}`;

   return (
      <div>
         {data?.dog && <img src={data.dog.displayImage} />}
         <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>Click me!</button>
      </div>
   );
}

参考：https ://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

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

6 回答 6

Related

Reference