Por ejemplo, tengo esta consulta para obtener una lista:
const list = useQuery('list', fetcher);
Pero necesito algo como una función de verificación previa antes de que la consulta de reacción ejecute eso, me refiero a algo como esto:
const appQueryClient = new QueryClient({ defaultOptions: { queries: { checkSomethingBeforeExecute: () => { if (itShouldExecute) { return true; // start fetching } else { return false; // don't fetch and abort query } } }, }, });
De hecho, eso de checkSomethingBeforeExecute
es idea mía... pero estoy buscando alguna opción o truco para implementar algo así. Si recuerda, hay una opción de select
para transformar los datos después de obtenerlos, pero necesito algo para determinar la consulta ejecutiva antes de que comience con la función de búsqueda.
##nueva actualización##
Actualicé mi pregunta para este ejemplo:
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);
Hay una entrada de selección para manejar el cambio de estado para cada id
y la consulta de reacción no recupera el caché y recupera incluso las mismas identificaciones ...
Gracias
si su consulta no está lista para ser ejecutada, la opción enabled
es lo que está buscando:
https://react-query.tanstack.com/guides/dependent-queries
si desea "no recuperar" y "abortar" la consulta (no estoy seguro de qué significa abortar aquí), puede devolver una Promesa rechazada de su consultaFn:
useQuery(key, () => { if (itShouldExecute) { return axios.get(...) } return Promise.reject(new Error("something error")) })
tenga en cuenta que esto pondrá la consulta en un estado de error y posiblemente desencadenará reintentos. La opción habilitada no ejecutará queryFn en absoluto y pondrá su consulta en estado idle
. Creo que estas son las dos opciones disponibles.