title: How to fetch data only on first click via react-query and then disable refetch on subsequent clicks
body: <p>I encountered a problem while implementing the form where the <strong>data</strong> used in select, retrieved from the database via react-query, <strong>should only be retrieved once when clicking on input, and subsequent clicks should not cause a refetch</strong>.</p>
  <p><em><strong>How to do it in clean way?</strong></em></p>
  <p>Hook:</p>
  <pre><code>export const useUnitOfMeasureSelectData = ({
    queryPageIndex,
    queryPageSize,
    queryFilters,
    enabled,
    refetchOnWindowFocus,
  }) =&gt; {
    return useQuery(
      [&quot;unitofmeasure-list&quot;, queryPageIndex, queryPageSize, queryFilters],
      () =&gt; fetchItemData(queryPageIndex, queryPageSize, queryFilters),
      {
        keepPreviousData: true,
        staleTime: 60000,
        enabled,
        refetchOnWindowFocus,
        select: (data) =&gt; {
          const categories = data.data.results.map((obj) =&gt; ({
            value: obj.id,
            label: obj.name,
          }));
          return categories;
        },
      }
    );
  };
  </code></pre>
  <p>In component calling <code>onClick={()=&gt;refetch()}</code> refetch data on every click.</p>
  <pre><code>  const {
      data: unitOfMeasureSelectData = [],
      refetch: refetchUnitOfMeasureSelectData,
    } = useUnitOfMeasureSelectData({
      queryPageIndex: queryPageIndex,
      queryPageSize: queryPageSize,
      queryFilters: filterString,
      enabled: false,
      refetchOnWindowFocus: false,
    });
  </code></pre>