rustclan
rustclan13mo ago

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.
No description
5 Replies
rocawear
rocawear13mo ago
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.
rustclan
rustclan13mo ago
Thank you!
Nick
Nick13mo 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
rustclan
rustclan12mo 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
wleistra12mo 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.