infer from trpc calls
It appears trpc clients dont infer the return type, and I have to set it in useQuery like this..
const addressResult = api.registration.addressLookup.useQuery<{ a: string }>(
{ address: address },
{ enabled: false }
);
Is this the case?
6 Replies
no the return type of the
data field returned by useQuery should be typed as the return type of the function in your trpc backendwas just coming to report back that I didnt have a return type :). Slick shit!! Thank for the reply @whatplan
@whatplan does this look right?
export const registrationRouter = createTRPCRouter({
addressLookup: protectedProcedure
.input(z.object({ address: z.string() }))
.query(async ({ input, ctx }) => {
return {
addressResult: async (): Promise<{
reps: Representative[];
sens: Representative[];
}> => {
let r = await new AddressVerificationManager(
process.env.NEXT_GEOCODIO_API_KEY!
).GetAddressAndCongressionalDistrict(input.address);
const districtNumber =
r.results[0]?.fields.congressional_districts[0]?.district_number;
const state = r.results[0]?.address_components.state;
return await getLegislativeDto(districtNumber, state);
},
};
}),
});
this is on the client
I feel like the addressResult shouldnt have that return type, but data of addressResult should
then trying to use data..
Im a bit lost
check out the trpc docs: https://trpc.io/docs/reactjs/usequery
click the backend code dropdown
should be very simple, pass a function to .query() and get the data in .useQuery().data
useQuery() | tRPC
The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.