如何在执行前检查 react-query 查询？

Question

例如，我有这个查询来获取列表：

const list = useQuery('list', fetcher);

但是在 react-query 执行之前我需要类似预检查功能的东西，我的意思是这样的：

const appQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      checkSomethingBeforeExecute: () => {
        if (itShouldExecute) {
          return true; // start fetching
        } else {
          return false; // don't fetch and abort query
        }
      }
    },
  },
});

事实上，checkSomethingBeforeExecute 是我的想法...但我正在寻找任何选项或技巧来实现类似的东西。如果您还记得的话，有一个 select 选项可以在获取后转换数据，但我需要一些东西来确定查询执行，然后再使用获取函数开始。

##新更新##

我更新了这个例子的问题：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const client = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false
    }
  }
});

const fetcher = () => fetch('https://randomuser.me/api/?results=5').then(res => res.json());

function App() {
  const [id, setId] = useState(null);
  const { data } = useQuery(['list', id], fetcher, { enabled: !!id });

  const change = (e) => {
    setId(e.target.value);
  }

  return (
    <div>
      <select onChange={change}>
        {
          Array(30).fill().map((i, ii) => <option value={ii} key={ii}>item - {ii}</option>)
        }
      </select>
    </div>
  )
}

const rootElement = document.getElementById('root');
ReactDOM.render(<QueryClientProvider client={client}><App /></QueryClientProvider>, rootElement);

有一个 select 输入来处理每个 id 的状态变化，并且 react-query 不会检索缓存并再次获取相同的 ID...

谢谢

Answer 1

如果您的查询尚未准备好执行，enabled 选项就是您要查找的选项：

https://react-query.tanstack.com/guides/dependent-queries

如果你想“不获取”和“中止”查询（不知道中止在这里意味着什么），你可以 return 从你的 queryFn 中拒绝承诺：

useQuery(key, () => {
  if (itShouldExecute) {
    return axios.get(...)
  }
  return Promise.reject(new Error("something error"))
})

请注意，这会使查询处于错误状态并可能触发重试。启用的选项根本不会运行 queryFn 并将您的查询置于 idle 状态。我认为这是两个可用的选项。

如何在执行前检查 react-query 查询？

How can I check the react-query queries before execute?

javascript

reactjs

react-query