I encountered a problem while implementing the form where the data used in select, retrieved from the database via react-query, should only be retrieved once when clicking on input, and subsequent clicks should not cause a refetch.

How to do it in clean way?

Hook:

export const useUnitOfMeasureSelectData = ({
  queryPageIndex,
  queryPageSize,
  queryFilters,
  enabled,
  refetchOnWindowFocus,
}) => {
  return useQuery(
    ["unitofmeasure-list", queryPageIndex, queryPageSize, queryFilters],
    () => fetchItemData(queryPageIndex, queryPageSize, queryFilters),
    {
      keepPreviousData: true,
      staleTime: 60000,
      enabled,
      refetchOnWindowFocus,
      select: (data) => {
        const categories = data.data.results.map((obj) => ({
          value: obj.id,
          label: obj.name,
        }));
        return categories;
      },
    }
  );
};

In ponent calling onClick={()=>refetch()} refetch data on every click.

  const {
    data: unitOfMeasureSelectData = [],
    refetch: refetchUnitOfMeasureSelectData,
  } = useUnitOfMeasureSelectData({
    queryPageIndex: queryPageIndex,
    queryPageSize: queryPageSize,
    queryFilters: filterString,
    enabled: false,
    refetchOnWindowFocus: false,
  });

I encountered a problem while implementing the form where the data used in select, retrieved from the database via react-query, should only be retrieved once when clicking on input, and subsequent clicks should not cause a refetch.

How to do it in clean way?

Hook:

export const useUnitOfMeasureSelectData = ({
  queryPageIndex,
  queryPageSize,
  queryFilters,
  enabled,
  refetchOnWindowFocus,
}) => {
  return useQuery(
    ["unitofmeasure-list", queryPageIndex, queryPageSize, queryFilters],
    () => fetchItemData(queryPageIndex, queryPageSize, queryFilters),
    {
      keepPreviousData: true,
      staleTime: 60000,
      enabled,
      refetchOnWindowFocus,
      select: (data) => {
        const categories = data.data.results.map((obj) => ({
          value: obj.id,
          label: obj.name,
        }));
        return categories;
      },
    }
  );
};

In ponent calling onClick={()=>refetch()} refetch data on every click.

  const {
    data: unitOfMeasureSelectData = [],
    refetch: refetchUnitOfMeasureSelectData,
  } = useUnitOfMeasureSelectData({
    queryPageIndex: queryPageIndex,
    queryPageSize: queryPageSize,
    queryFilters: filterString,
    enabled: false,
    refetchOnWindowFocus: false,
  });

• javascript
• reactjs
• axios
• react-query

• You could possibly const selectFetched = useRef(false) and after the first fetch update to selectFetched.current = false; - and then do a check for each subsequent click on the select? – John Detlefs Commented May 6, 2022 at 3:35
• 1 @JohnDetlefs It could work, but the form contains several elements desiring the behavior described in the question. I think I will do just the way you describe. I'm chasing a deadline, and that seems like a fine solution. – skelaw Commented May 6, 2022 at 3:53

2 Answers 2

looks like you want a lazy query with infinite stale time:

const [enabled, setEnabled] = useState(false)

useQuery(key, fn, { enabled, staleTime: Infinity })

then, when you click on the input, you call setEnabled: true. The infinite stale time makes sure that the query is always considered fresh, so no more background refetch is happening.

The button in react/native has a property disabled that you can set to false when you are done. Probably the way to do this is with state

<button disabled={this.state.btnDisable}/>

Then you can update the state when you first click the button

//class ponent
this.setState({btnDisable: false})

//function ponent
setbtnDisable(false)