如何在执行之前检查 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 选项可以在获取后转换数据，但我需要一些东西来确定查询执行，然后才能从 fetcher 函数开始。

##新更新##

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

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

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

谢谢

Answer 1

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

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

如果您想“不获取”和“中止”查询（不确定此处的中止是什么意思），您可以从您的 queryFn 返回一个被拒绝的 Promise：

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

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