return type of a query endpoint

Hello I currently have a trpc endpoint:

  const customInstances = api.customInstance.userCustomInstances.useQuery();

  const customInstances = api.customInstance.userCustomInstances.useQuery();

And I am trying to pass this into a custom react component:

interface CustomInstanceProps {
  customInstances: any;
}

const CustomInstance = ({customInstances}: CustomInstanceProps) {
  const data = customInstances.data;
  const refetch = () => {customInstances.refetch()}
   
  return (
  <Button onClick={() => {
    refetch()
   }}>refetch data</Button>
)
}

interface CustomInstanceProps {
  customInstances: any;
}

const CustomInstance = ({customInstances}: CustomInstanceProps) {
  const data = customInstances.data;
  const refetch = () => {customInstances.refetch()}
   
  return (
  <Button onClick={() => {
    refetch()
   }}>refetch data</Button>
)
}

The problem is, I'm not entirely sure how I am supposed to type the customInstance property? I have tried using return types:

  customInstances: ReturnType<
    typeof api.customInstance.userCustomInstances.useQuery
  >;

  customInstances: ReturnType<
    typeof api.customInstance.userCustomInstances.useQuery
  >;

but this makes the data property value unknown.

5 Replies

rocawear•15mo ago

https://trpc.io/docs/client/react/infer-types

Inferring Types | tRPC

In addition to the type inference made available by @trpc/server (see here) this integration also provides some inference helpers for usage purely in React.

rustclanOP•15mo ago

Thank you!

Nick•15mo ago

I wouldn't pass around the whole Query object, prefer writing interfaces which can be re-used and you'll make components easier to re-use, particularly for testing I'd have a data prop and a refetch prop for your use-case, though needing to refetch() at all is sometimes (maybe not here) a sign you're doing something a bit wrong with react-query That also means you can host on other adapters too. Coupling is often bad

rustclanOP•14mo ago

Sorry, I just saw these messages. At the moment I mainly use refetch to update the response once something has been updated/deleted. I should probably just return the updated document in the response to the mutation, or in the case of a delete just remove it from the original data list. Would be more efficient for sure.

wleistra•14mo ago

In react query you can use invalidate for that purpose, this will invalidate the query and fetch from server. Invalidate is available on the useContext of trpc.