De acuerdo con la referencia de la API , debe cambiar la opción enabled a falso para deshabilitar la ejecución automática de una consulta. Luego vuelves a buscar manualmente.

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

Caja de arena de trabajo aquí .

Bonificación: puede pasar cualquier cosa que devuelva un valor booleano a enabled . De esa manera, podría crear consultas dependientes/serie.

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

Hay otra forma de hacer esto que también funciona si desea activar varias recuperaciones.

 const [fetch, setFetch] = useState(null); const query = useQuery(["endpoint", fetch], fetchData); const refetch = () => setFetch(Date.now()); // call the refetch when handling click.

Si desea recuperar varias entidades, puede tener un useState de nivel superior que se llame, por ejemplo, fetchAll y:

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

y este código también se activará si presiona un botón para buscar todo.

puedes usar 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> ); }

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

Puedes probar esta versión:

 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

De la documentación Doc :

enabled: boolean

• Establézcalo en falso para deshabilitar la ejecución automática de esta consulta.
• Se puede utilizar para consultas dependientes.

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

• Una función para recuperar manualmente la consulta.
• Si la consulta falla, solo se registrará el error. Si desea que se arroje un error, pase la throwOnError: true option
• Si cancelRefetch es true , la solicitud actual se cancelará antes de que se realice una nueva solicitud.

Al principio, la consulta de reacción nos da la opción habilitada y, de forma predeterminada, es verdadera

 const fetchData = async()=>{...} const {status, data, error , refetch} = useQuery(myKey, fetchData() , { enabled : false } ); <button onClick={() => refetch()}>Refetch</button>

Debe pasar el manual: true para que la consulta no se obtenga en el montaje. Además, debe pasar fetchData sin los paréntesis, de modo que pase la referencia de la función y no el valor. Para llamar a la consulta, usa refetch().

 const {status, data, error, refetch} = useQuery(myKey, fetchData, { manual: true, }); const onClick = () => { refetch() }

Consulte la sección de consulta manual en los documentos de consulta de reacción para obtener más información https://github.com/tannerlinsley/react-query#manual-querying

Parece que la documentación cambió y ahora mismo falta la sección de consulta manual. Sin embargo, al observar la API useQuery, probablemente deba establecer enabled en falso y luego usar refetch para consultar manualmente cuando se presiona el botón. También es posible que desee utilizar force: true para que consulte independientemente de la actualización de los datos.