200

I am new to this react-query library.

I know that when I want to fetch data, with this library I can do something like this:

const fetchData = async()=>{...}

// it starts fetching data from backend with this line of code
const {status, data, error} = useQuery(myKey, fetchData());

It works. But how to trigger the data fetching only when a button is clicked? , I know I probably could do something like <Button onPress={() => {useQuery(myKey, fetchData())}}/> , but how to manage the returned data and status...

14 Answers 14

229

According to the API Reference, you need to change the enabled option to false to disable a query from automatically running. Then you refetch manually.

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

Working sandbox here  

Bonus: you can pass anything that returns a boolean to enabled. That way you could create Dependant/Serial queries.

// 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,
  }
)
14
  • 16
    Why not using useMutation instead of useQuery?
    – otto
    Commented Apr 15, 2021 at 10:20
  • 6
    If it helps someone, refetch() returns a promise and can resolve it to get the data of the response if you want to do something synchronously. Commented Aug 5, 2021 at 15:23
  • 13
    We cannot use mutations for a get call, we can use them for put/post/delete calls react-query.tanstack.com/guides/mutations
    – AD B
    Commented Aug 30, 2021 at 16:57
  • 4
    @ADB I can't find anything in the documentation that says "useMutation cannot be used with get request", can you point me to the right place?
    – Bruce Sun
    Commented Jun 6, 2022 at 2:02
  • 7
    This works but is not recommended by the primary maintainer. Instead use queryClient.fetchQuery()
    – heez
    Commented Aug 11, 2023 at 22:51
31

You have to pass the manual: true parameter option so the query doesn't fetch on mount. Also, you should pass fetchData without the parentheses, so you pass the function reference and not the value. To call the query you use refetch().

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

const onClick = () => { refetch() }

Refer to the manual querying section on the react-query docs for more info https://github.com/tannerlinsley/react-query#manual-querying

1
20

Looks like the documentation changed and is missing the manual querying section right now. Looking at the useQuery API however, you'd probably need to set enabled to false, and then use refetch to manually query when the button is pressed. You also might want to use force: true to have it query regardless of data freshness.

20

There are two problems with refetch():

  • it will send a request to the server even if the response is already cached and the staleTime has not expired
  • you can't pass params to it

If you need to make a query on an event like onClick or onChange, use queryClient.fetchQuery().

function MyComponent() {
  const queryClient = useQueryClient();

  const handleOnClick = async () => {
    const data = await queryClient.fetchQuery({ queryKey, queryFn });
  }

  return <button onClick={handleOnClick}>My Button</button>;
}

You can see the creator and current maintainer recommending this approach.

3
  • 2
    Okay but then what about isLoading and isError and all the other conveniences of useQuery? Commented Apr 5 at 4:29
  • @V.Rubinetti you can add the state yourself with two booleans. fetchQuery() throws, so you'd ideally have it in a try/catch, if you catch anything, set isError to true, and before/after the try/catch you'd set your loading state
    – heez
    Commented Apr 8 at 16:43
  • @V.Rubinetti you can also consider alternatives, like having your button click set some state which impacts the enabled condition of useQuery()
    – heez
    Commented Apr 8 at 16:45
8

At first react query gives us enabled option and by default it is true

const fetchData = async()=>{...}

const {status, data, error , refetch} = useQuery(myKey, fetchData() , {
enabled : false
}
);

<button onClick={() => refetch()}>Refetch</button>
2
  • r u sure that enabled is true by default?
    – HackerMF
    Commented Mar 15, 2023 at 16:09
  • Yah if enabled is not true then how can react query fetch data in initial render look up to react query docs they purely assign that enabled is true it is pretty common right cause we always want the data in initial render so enabled is always true. Commented Mar 16, 2023 at 5:04
5

You can try this version:

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

From documentation Doc:

enabled: boolean

  • Set this to false to disable this query from automatically running.
  • Can be used for Dependent Queries.

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

  • A function to manually refetch the query.
  • If the query errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true option
  • If cancelRefetch is true, then the current request will be cancelled before a new request is made
3

There is another way to do this that also works if you want to trigger multiple refetches.

const [fetch, setFetch] = useState(null);
const query = useQuery(["endpoint", fetch], fetchData);

const refetch = () => setFetch(Date.now());

// call the refetch when handling click.

If you want to refetch multiple entities you could have a top level useState that is called for instance fetchAll and:

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

and this code will also trigger if you press a button to fetch all.

2
  • sadly Not work! It's not refetch if the fetch changes
    – Oliver D
    Commented Mar 27, 2021 at 14:22
  • @OliverD I'm using this, so most likely you have some other issue Commented Mar 27, 2021 at 20:05
2

If the key is the same, then use refetch(), if the key is different then use useState to trigger the query.

For example:

const [productId, setProductId] = useState<string>('')
const {status, data, error, refetch} = useQuery(productId, fetchData, {
      enable: !!productId,
    });

const onClick = (id) => { 
if(productId === id) {
  refetch() 
}
else {
 setProductId(id)
}


}
1
  • 1
    not enable but enabled Commented May 3, 2023 at 11:25
1

As mentioned by others in this thread, using query.refetch does make a request even if the cache is not stale. So ideally, we would not call query.refetch only if query.isFetched && !query.isStale. I wanted to encapsulate that logic inside a hook and this is how I solved it:

// useGetFoo.ts
export const useGetFoo = () => {
  const query = useQuery({
    queryKey: ["foo"],
    queryFn: fetcher,
    enabled: false,
  });

  const fetch = (): ReturnType<typeof query.refetch> => {
    if (query.isFetching) return Promise.resolve(query);
    if (query.isFetched && !query.isStale && !query.isError)
      // browser hangs without this setTimeout
      return new Promise((resolve) => setTimeout(() => resolve(query)));
    return query.refetch();
  };

  return { ...query, fetch };
};

And then we can use it like this:

// SomeComponent.tsx
const { data, fetch: getFoo } = useGetFoo();

useEffect(() => {
  void getFoo();
}, [getFoo]);
0

In react-query there is an option for useQuery() to trigger the hook whenever you want. The option is enabled which only takes boolean. Here's an example:

const useGetAllUsers = useQuery({
    queryKey:["users"],
    queryFn: your_fetch_request,
    enabled: true|false
})

you can pass any boolean state from that component here.

0
const { data, isLoading, refetch } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
  enabled: false,
});


return (
  <div>
    <Link to={"/"}>home</Link>
    <h1>Users</h1>

    <button onClick={refetch}>fetch data</button>
    <hr />

    {isLoading && <h1>loading...</h1>}
    {data?.data.map((user) => (
      <p key={user.id}>{user.name}</p>
    ))}
  </div>
);

In React Query v5, fetching occurs when a page mounts. To disable fetching on mount, set enabled to false in the options for useQuery. You can then use the refetch function to manually fetch data when needed by your event.

0

refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => A function to manually refetch the query. If the query errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true option cancelRefetch?: boolean Defaults to true Per default, a currently running request will be cancelled before a new request is made When set to false, no refetch will be made if there is already a request running.

const {isPending, data, refetch} = useQuery({
queryKey: ['yourKey'],
queryFn: ({signal}) => apiService.get("/myapiendpoint", {signal}),
enabled: false,
})

<button
   onClick={() =>
     refetch({ throwOnError: true, cancelRefetch: false })} >
</button>

-2

User query on click is it will only fetch the data when user click or user allow Earlier any website will fetch data by default whenever you use axios for get data now userquery on click help to fetch data only when you clicked on a button so for this you have to do 2 things

  1. Use Usequery for fetching data by disabling the button for default fetching
  2. Usequery gives you one thing refetch which will help you below is the code
const fetchSuperHeroes=()=>{
return axios.get("localhost:4000/superheroes")
const {isLoadind,data,error,isError,refetch}=useQuery('super-heroes',fetchSuperHeroes{
enable:false
}
-12

you can use 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>
   );
}

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

1
  • 3
    This is wrong answer because it uses apollo client which is a different library from react-query and doesnt apply in this context. Plus that is graphql the question is for REST API.
    – Vignesh S
    Commented May 2, 2022 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.