How can i use inferprocedureoutput?

I'd like to write this code type-safely:

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

I'm pretty sure i need to use

inferProcedureOutput

inferProcedureOutput

inferProcedureOutput

inferProcedureOutput but i couldn't figure out what to pass. I can never access

query.isLoading

query.isLoading

query.isLoading

query.isLoading for example.