I have a form with 3 inputs and a button:

• Slider1
• Slider2
• Select
• Play button

I need to send a fetch request on first button click (to fetch initial data) then need to fetch data only if values in any of the inputs have changed. If values are the same then no request should be made. How can I do that?

I tried refetch but it fires everytime I click on Play button. The request should be send only if user clicked the button.

export const useFetchVoiceSample = ({ id, language, accent, expressiveness }: GetVoiceSamplePayload) => {
  return useQuery({
    queryKey: ['voiceSample', id, language, accent, expressiveness],
    enabled: false,
    queryFn: async () => {
      return getVoiceSample({ id, language, accent, expressiveness });
    },
  });
};