React Hooks and React Query (useQuery): invoking the API call/ query only when a button is clicked

Question

I am working on a React JS project. I am using React Hooks (functional components) and React query.

I normally run/ execute the query as follow in the functional component.

const ItemList = (props) => {
  let getItemsQuery = useQuery([ 'get-items' ], getItems, {
    retry: false,
    refetchOnWindowFocus: false
  });

  // The rest of the code goes here
}

Basically the query is executed when the component is loaded so that the API call is made too.

Now, I am looking for a way where I can only execute the query when a button is clicked.

return (
   <button onClick={() => {
       //make the call. The value or value might be overridden when the API call is made when the Call 2 button is clicked
    }}>Call 1</button>
   <button onClick={() => {
       //make the call. The value or value might be overridden when the API call is made when the Call 1 button is clicked
    }}>Call 2</button>
)

As you can see in the dummy code above, the comment explains what I want to achieve. How can I do that?

So when the button is clicked the query is made, does the query stop if the button is clicked again? — yudhiesh, Nov 10 '20 at 14:11
Does this answer your question? [React-Query: How to useQuery when button is clicked](https://stackoverflow.com/questions/62340697/react-query-how-to-usequery-when-button-is-clicked) — jack.benson, Nov 10 '20 at 14:21
But what if I want to pass a different parameter when the button is clicked? — Wai Yan Hein, Nov 10 '20 at 14:23

jack.benson · Accepted Answer · 2020-11-10T15:20:48.763

6

Pulling from this answer:

import React, { useState } from "react";
import { useQuery } from "react-query";

const App = (props) => {
  const [text, setText] = useState("");

  // use your async request (axios, fetch, etc)
  // useQuery expects a Promise so we can safely use this instead
  const emulateFetch = async (_) => {
    // axios.get (...)
    console.log(`Passing ${text} to fetch`);
    return new Promise((resolve) => {
      resolve([{ data: "ok" }]);
    });
  };

  const handleClick = () => {
    // manually refetch
    refetch();
  };

  const { isLoading, error, data, refetch } = useQuery(
    ["key", { text }],
    emulateFetch,
    {
      refetchOnWindowFocus: false,
      enabled: false // needed to handle refetchs manually
    }
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <p>Home page</p>
      <input
        type="text"
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <button onClick={handleClick}>Click me</button>
      {JSON.stringify(data)}
    </div>
  );
};

export default App;

Working sandbox.

edited Nov 10 '20 at 15:20

answered Nov 10 '20 at 14:20

jack.benson

2,211
2
9
17

But what if I want to execute the query again with the different parameter when the button is clicked? – Wai Yan Hein Nov 10 '20 at 14:22
It looks like you can handle this in your query function. Check out this example: https://codesandbox.io/s/fervent-wiles-tgy5p?file=/src/App.js – jack.benson Nov 10 '20 at 14:31
This is what I am after. Cheers. – Wai Yan Hein Nov 10 '20 at 14:54
1

But what I do not want to execute it when the component is loaded and I only when to execute it when the button is clicked? – Wai Yan Hein Nov 10 '20 at 14:58
1

I updated my example with something that I think does everything you want it to. Check it out: https://codesandbox.io/s/reactquery-manual-refetch-forked-3tlxj?file=/src/App.js:0-1120 – jack.benson Nov 10 '20 at 15:21
Perfect. This is what I am after. Thanks. – Wai Yan Hein Nov 11 '20 at 12:51

React Hooks and React Query (useQuery): invoking the API call/ query only when a button is clicked

1 Answers1