React Query use custom hook with useQuery on click event

Question

I have a button that when the customer click it I need to fetch data from my database, for this I use React Query and I encountered a problem where I tried to use custom hook inside event handler which is not possible, I'm stuck on figuring out how to use it

this is my custom hook

 export const useGuestInfo = () => {
  const { bookingId } = useSearchParams();
  const { isGettingGuestInfo, data: guestInfo } = useQuery({
    queryKey: [`guest`, bookingId],
    queryFn: (bookingId) => getGuestInformation(bookingId),
  });
  return { isGettingGuestInfo, guestInfo };
};

and this is my Event handler I'm trying to use

  const onGuestUpdate = () => {
    setUpdateGuestModal(true);
    searchParams.set("bookingId", bookingId);
    setSearchParams(searchParams);
    const { isGettingGuestInfo, guestInfo } = useGuestInfo();
  };

the error i'm getting is Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

how would you do it?

another question, do you always need to use useQuery() when trying to fetch data from api or database? or you can do it in normal functions too? i'm new to programming :)

Do you want to re-fetch the data after setting bookingId? If that's the case then you can pass bookingId as param to useGuestInfo and useQuery will automatically get new data. — Bhavesh Parvatkar
– Bhavesh Parvatkar, Commented Dec 4, 2023 at 18:10
For your second question, no, it's not necessary to use useQuery. You can also use fetch (builtin library) or Axios to call the apis. — Bhavesh Parvatkar
– Bhavesh Parvatkar, Commented Dec 4, 2023 at 18:12
@BhaveshParvatkar right now I can't fetch nothing because the custom hook is called inside an event handle and its against the rules, my problem is how can I implement it, that I will be able to fetch data by custom hook from inside an event handler — LightSkyLiam
– LightSkyLiam, Commented Dec 4, 2023 at 18:32

Bhavesh Parvatkar · Accepted Answer · 2023-12-04 18:54:36Z

You can keep the hook separate and conditionally call it only when bookingid is set.

The hook takes bookingId as parameter. The enabled property will call the API only when bookingId is available.

hooks.js

export const useGuestInfo = (bookingId) => {
  const { isFetching: isGettingGuestInfo, data: guestInfo } = useQuery({
    queryKey: [`guest`, bookingId],
    enabled: bookingId !== null,
    queryFn: () => getGuestInformation(bookingId),
  });
  return { isGettingGuestInfo, guestInfo };
};

App.js

We declared useGuestInfo but it wont call the API until bookingId is not null.

onGuestUpdate method will set bookingId in searchParams and then useGuestInfo will be called.

const { bookingId } = useSearchParams();
const { isGettingGuestInfo, guestInfo } = useGuestInfo(bookingId)

const onGuestUpdate = () => {
    setUpdateGuestModal(true);
    searchParams.set("bookingId", bookingId);
    setSearchParams(searchParams);
};

I am not sure how setSearchParams works in your code but I guess you might replace const { bookingId } = useSearchParams(); with setSearchParams data

Collectives™ on Stack Overflow

React Query use custom hook with useQuery on click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related