return type of a query endpoint

Rrustclan

9/22/2023

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.

Rrocawear

9/22/2023

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

Rrustclan

9/22/2023

Thank you!

Nnlucas

9/23/2023

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

Rrustclan

10/11/2023

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.

Wwleistra

10/12/2023

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.

Looking for more? Join the community!

tRPC

return type of a query endpoint

Join Server

tRPC

return type of a query endpoint

Join Server

Recommended 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 t How to trigger revalidate after server action on a client componenthttps://github.com/trpc/examples-next-app-dir/blob/main/src/app/server-action/ReactHookFormExample.t trpc openapi api memory problemHi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using T Context being destroyed in mutatorIm currently building an app using the t3 stack + clerk for auth I have an operation which relies o Optimizing 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 da corsHi! Some problems with cors maybe you can help, ```readingbee.se/:1 Access to fetch at 'https://serv Showing pending inside the request?I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it m Output properties missing on frontend results (Type Infer)My trpc client is inferring the type without some properties from the object (See images for explen Avoid 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 Property 'query' does not exist on type ...I think this is an issue on my end here is how I am defining everything ``` export const t = initTRP useQueries passing ctx data to splitLink not workingWhen tRPC is implemented with splitLink using useQueries does not pass cxt parameters to splitLink. Build and Publish on lambda from Github ActionsTrying to send my TRPC API on Lambda AWS + API Gateway. I have follow the documentation. But now ho next-pwa with trpc and push notificationHow can I build an app with next-pwa, trpc and push notification?Forced router input?I have a user route which has routes like get, delete, create etc. Some of the routes I require extr Authentication with Expo applicationHi guys, I wan't to convert my current application stack to T3 stack. Current stack is: - NestJS