Is it possible to pass a "x.useQuery" into a component as typescripted param?

[pxue]

I have a Messenger component that fetches chat messages, sends message responses, and polls for new messages,

currently, I wrap the Messenger component with a data fetcher that calls some query, and then passes "Messages[]" to the Messenger for rendering, I do this everywhere that needs a Messenger. And since this component is doing the fetching, I'm duplicating pollingInterval logic multiple times.

I want to reuse this component, they may fetch messages from different rtk queries.

Can I pass the useQuery with typescript typing into the Messenger component, so that I don't have to create the data-fetching component?

function Messenger({
  chatId
}: MessengerProps) {
  const [pollingInterval, setPollingInterval] = useState(defaultPollingInterval)
  const {
    data: messages = [],
    isLoading,
    isError
  } = useFetchMessagesQuery(chatId as number, {
    skip: !chatId || pollingInterval >= maxPollingInterval,
    refetchOnMountOrArgChange: true,
    pollingInterval: pollingInterval
  })
  const [addComment] = useAddMessageMutation()

  async function handleSend(message: string) {
    return addComment({
      chatId: chatId as number,
      body: message
    }).unwrap()
  }

  useEffect(() => {
    if (isError) {
      setPollingInterval((prev) => {
        return Math.min(prev + 10000, maxPollingInterval)
      })
    }
  }, [isError])

  return (
    <Messenger messages={messages} isLoading={isLoading} onSend={handleSend} />
  )
}

[phryneas]

It is generally a bad idea to pass any hook in as a prop. That prop could be switched out at runtime and cause different hooks to be called in a subsequent render, breaking the rules of hooks.

That said, if you're careful, you can do it, although I would avoid the pattern.

[ahoopes16]

Hi! This seems similar to this topic but I can't tell if it's quite the same, I'd love any input I could get.

I'm implementing an infinite list component, and I want to be able to pass in generic queries that have paginated responses through a prop so that all of the pagination logic can be encapsulated to that single component, regardless of what the paginated items happen to be. All of my query hooks are generated using createApi().

I'm having trouble getting the TypeScript types to work for me, though. Has anyone else tried to do something similar in the past? Example of how I'd like it to work below. I have types defined for my paginated responses, etc., I just can't figure out how to use those types to be able to pass the query as a prop. Thanks in advance for any guidance!

// Parent Component
import { useGetDataPaginatedQuery } from 'app/redux/$query';
import InfiniteList from './InfiniteList.tsx';

export const ParentComponent = () => {
   const dataQuery = useGetDataPaginatedQuery()

   return <InfiniteList query={dataQuery} />
}

// Child Component
type Props = {
   query: unknown // <--- This is where I'm having trouble making it work!
}

export const InfiniteList = ({ query }: Props) => {
   const { isError, isLoading, isFetching, data } = query

   // ... use query properties and data here
}

[pxue]

@ahoopes16 yes very similar to what I'm asking for.

I believe @phryneas is saying that this is not recommended. Hooks should be used in a way that they're not passed as props, because they should not be called conditionally.

I've also accidentally found this in the docs, I believe it could help us both.

I will set up a getChatMessages api, and based on some flag I've set in the state (maybe like a parent context), I can adjust the endpoint to fetch the Messages[] from. As long as the data type returned is all the same type, this should work.

[ahoopes16]

@pxue and @phryneas Thank you for the responses and context!

It surprises me that this would be an antipattern, as it's very common to pass returned values from hooks as props. I see this a lot from the useState hook especially, like so:

const [value, setValue] = useState('')

return <input onChange={e => setValue(e.target.value)} value={value} />

Similarly, the hook should be called in the parent component no matter what, I just want to pass the values returned from the query hook into a component. Is that still considered a problem?

[phryneas]

Ah, you're looking for the return value here - the subject was about the hook itself!

You could use the TypedUseQueryHookResult type.

[ahoopes16]

Beautiful, thank you! I'll give that a shot.

[ahoopes16]

Hmm, I'm having trouble finding that to import. Was that introduced in a release post 1.8.0?

[ahoopes16]

Nevermind, I found it, I just needed to upgrade to 1.8.4. Thanks again!