☰

React-Query: ボタンがクリックされたときにクエリを使用する方法 質問する

tag-icon • tag-icon reactjs react-native react-query
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())}}/>、返されたデータとステータスをどのように管理すればよいのでしょうか...

ベストアンサー1

によるAPIリファレンス、enabledオプションを次のように変更する必要があります間違いクエリの自動実行を無効にします。その後、手動で再フェッチします。

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

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

const { data, refetch } = useQuery("my_key", emulateFetch, {
  refetchOnWindowFocus: false,
  enabled: false // disable this query from automatically running
});

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

おすすめ記事