rustclan
rustclan10mo 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
rocawear10mo 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
rustclan10mo ago
Thank you!
Nick
Nick10mo 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
rustclan9mo 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
wleistra9mo 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.
More Posts
Troubleshooting 'Type Instantiation Is Excessively Deep' Error in Next.js Project with TRPC IntegratI am using the table and pagination for listing data, just as the awesome developer did in 'https://procedure.input(z.object) is inferred as a partial (optional fields)?Have a strange case of my input types coming through as partial in procedures, cannot replicate in tHow to trigger revalidate after server action on a client componenthttps://github.com/trpc/examples-next-app-dir/blob/main/src/app/server-action/ReactHookFormExample.ttrpc openapi api memory problemHi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using TContext being destroyed in mutatorIm currently building an app using the t3 stack + clerk for auth I have an operation which relies oOptimizing Data Refresh with trpc in React/Nextjs? Is there a more efficient way?I'm working on a Nextjs project using trpc, and I've noticed that I'm repeating the same code for dacorsHi! Some problems with cors maybe you can help, ```readingbee.se/:1 Access to fetch at 'https://servShowing pending inside the request?I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it mOutput properties missing on frontend results (Type Infer)My trpc client is inferring the type without some properties from the object (See images for explenAvoid checking for TRPCClientError, and return the error in client query/mutateWhat i'm trying to do, is avoid doing try/catch on every trpc call to backend, if ZOD validation fai