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 component calling onClick={()=>refetch()} refetch data on every click.
const {
data: unitOfMeasureSelectData = [],
refetch: refetchUnitOfMeasureSelectData,
} = useUnitOfMeasureSelectData({
queryPageIndex: queryPageIndex,
queryPageSize: queryPageSize,
queryFilters: filterString,
enabled: false,
refetchOnWindowFocus: false,
});
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 component
this.setState({btnDisable: false})
//function component
setbtnDisable(false)