Impertative fetching pattern for reusable custom components

[alwyntan]

Hi, I have an additional follow-up question that is related to this. I'm looking to create a more dynamic component that allows for different custom useQuerys' to be passed into the component, and I'm wondering if that is an ok approach, or is there a better alternative.

Use cases are for things like Async Select components and Infinite lists. Eg. When a user types in an input, there's a debounce, the useQuery fires and populates the options. Or, when a user scrolls to the end of an infinite list, the useInfiniteQuery hook fires, and loads in more options.

For example, the setup I've done that works look something like this, but it doesn't feel right passing hooks down as props, as hooks should not be called conditionally:

// useUsers.js

export const fetchUsers = async (filterString) => {
    return (await axios.get('/user', { params: filterString})).data
}

export const useUsers = (filter) =>
    useQuery({
        queryKey: userQueryKeys.users(filter), // [{ scope: 'user', entity: 'list', filter: <filter> }]
        queryFn: (filter) => fetchUsers(filter),
        select: data => data.users,
    })

// Select.jsx

const Select = ({searchQueryHook}) => {
    const [filter, setFilter] = useState('')
    const { data } = searchQueryHook(filter)

    // debounce, inputs, etc that changes the filter when typed

    return <SelectComponent options={data} />
}

export default Select

// CreateEventForm.jsx

import useUsers from './useUsers'
import useEvents from './useEvents'
import useEtc from './useEtc'

const Form = () => {
    return (
        <div>
             <Select searchQueryHook={useUsers} >
             <Select searchQueryHook={useEvents} >
             <Select searchQueryHook={useEtc} >
        <div>
    )
}

export default Form

One other option is to export the queryParams and pass the queryParams as a prop instead by having a useQuery(params) in the Select component itself.

// useUsers.js
export const fetchUsers = async (filterString) => {
    return (await axios.get('/user', { params: filterString})).data
}

export const useUsersParams = {
    queryKey: userQueryKeys.users(filter), // [{ scope: 'user', entity: 'list', filter: <filter> }]
    queryFn: (filter) => fetchUsers(filter),
    select: data => data.users,
}

export const useUsers = (filter) =>
    useQuery(useUsersParams)

Are there other ways to approach this better? I'm trying to avoid bloating the codebase with custom individual components like UserSelect, EventSelect, EtcSelect that calls the respective hooks in their files. This applies to infinite lists too.

[TkDodo]

sure, that works