How to call API only once with React Query?

Question

I'm making a visitor call system with React Query.

I have a kind of call (button) and I want to call the api only when it is pressed. However, when the component is rendered, it keeps calling the api.

How not to call the component when it is rendered
How to call api only when button is pressed

What should I do?

//App.jsx
const query = useQuery('resData', getEmployData('datas'), {
  enabled: false
  });

const callBtn = () => {
  query.refetch()
}


return (
  <ul>
    <li onClick ={callBtn}>Post</li>
    <li>Food</li>
    <li>Other</li>
  </ul>
)

this is api function

const getEmployData = async(callKind) => {
    const {data} = await axios.get(`${baseUrl}/welcome?callKind=${callKind}`);

    return data
}

nxa · Accepted Answer · 2023-05-04 11:37:34Z

15

You can achieve that by using staleTime: Infinity on your config object. Please take a look at https://tanstack.com/query/v4/docs/react/guides/initial-query-data#staletime-and-initialdataupdatedat

Your code should look like:

const query = useQuery('resData', getEmployData('datas'), {
  enabled: false,
  staleTime: Infinity
});

This will tell react query that this data should be considered as "Fresh", by default queries are marked as "Stale" right away and "Stale" queries are refetched automatically in the background when:

New instances of the query mount
The window is refocused
The network is reconnected.
The query is optionally configured with a refetch interval.

https://tanstack.com/query/v3/docs/react/guides/important-defaults

edited May 4, 2023 at 11:37

nxa

3,0623 gold badges23 silver badges45 bronze badges

answered Mar 11, 2022 at 0:07

Gerardo Sabetta

5803 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aaron Over a year ago

If the query fails, it will retry in this case?

Gerardo Sabetta Over a year ago

By default React query will retry a failing request up to 3 times before settling on status errored. Whether the request ends up in status: "success" or status: "error" makes no difference to the freshness or staleness of the data. If the request is a status: "error" and it's considered "fresh", it will behave exactly as a status: "success" would do.

Aaron Over a year ago

So you'll need retry: falseto guarantee that it will only call API once.

Gerardo Sabetta Over a year ago

Correct, I always disable retryability in react-query, you can disable it globally using the QueryClient defaultOptions parameters tanstack.com/query/v4/docs/reference/QueryClient

Karma Blackshaw Over a year ago

saved my day! spent hours finding where it's triggering the render 💀

Collectives™ on Stack Overflow

How to call API only once with React Query?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related