Feature to disable useQuery and related specialised hooks

[ValentinH]

Is your feature request related to a problem? Please describe.
I'm building an autocomplete input for a form outside of a Create/Edit page and I'd like to only call the API if the search text has at least 1 character.

Here's the code I have (Autocomplete is coming from mui-rff):

const CategoryAutocomplete = ({ name, label }: Props) => {
  const [searchText, setSearchText] = React.useState('')
  const debouncedSearchText = useDebounce(searchText, 300)

  const { ids, data: categories, loading: isLoading } = useGetList<Category>(
    'categories',
    {
      page: 1,
      perPage: 20,
    },
    { field: 'name', order: 'ASC' },
    {
      q: debouncedSearchText,
    }
  )
  const options = ids?.map((id) => categories?.[id]).filter(isPresent) || []
  return (
    <Autocomplete
      label={label || 'Category'}
      name={name}
      required
      loading={isLoading}
      options={options}
      getOptionValue={(option) => option.id}
      getOptionLabel={(option) => option.name}
      renderOption={(option) => <Option category={option} />}
      onInputChange={async (_e, v) => {
        setSearchText(v)
      }}
    />
  )
}

Describe the solution you'd like
I'd like to be able to pass a boolean option like enabled that would prevent the hook from calling the API if it's false. This is what react-query is providing: https://react-query.tanstack.com/reference/useQuery#_top

Describe alternatives you've considered
I consider using useMutation and pass getList as its type but it doesn't feel idiomatic.

Additional context
Nothing else comes to my mind

[djhi]

Hi and thanks for the suggestion. That's not something we want to add though. May I ask why you don't use the AutocompleteInput?

[fzaninotto]

I think it makes sense for dependent queries:

// fetch posts
const { ids, data: posts, loading: isLoading } = useGetList<Post>(
    'posts',
    { page: 1, perPage: 20 },
    { field: 'name', order: 'ASC' },
    {}
);

// then fetch categories for these posts
const { data: categories, loading: isLoading } = useGetMany<Category>(
    'categories',
    ids.map(id=> posts[id].category_id),
    // run only if the first query returns non-empty result
    { enabled: ids.length > 0 }
);

@ValentinH Do you feel like submitting a PR for that feature?

[ValentinH]

@fzaninotto yes this is one of the use case I had in mind. I'm happy to work on a PR 🙂

@djhi to be honest, I actually started using the AutocompleteInput but I had issues. It might come from the fact that I don't use it in a Create/Edit form but inside a react-final-form Form component.

[ValentinH]

@fzaninotto I created a WIP PR. Whenever you have time, could you tell me if this is going in the right direction?

[fzaninotto]

Fixed by #5849