Theo's Typesafe Cult•14mo ago

ct3a with `react-query`

Hi! I am messing around with ct3a, and honeslty it's pretty good. Trpc is great, react-query is great, but even though I've read the docs, I am not sure how to call trpc procudere with react-query. I've been trying whats in the docs also:

const thisUser = await api.user.getUser.useQuery()

const thisUser = await api.user.getUser.useQuery()

but seems like the useQuery is not exists on the type:

Property 'useQuery' does not exist on type '{ query: Resolver<BuildProcedure....

Property 'useQuery' does not exist on type '{ query: Resolver<BuildProcedure....

the API looks like this:

export const userRouter = createTRPCRouter({
    getUser: protectedProcedure.query(({ ctx }) => ({
        ...ctx.session.user
    }))
})

export const userRouter = createTRPCRouter({
    getUser: protectedProcedure.query(({ ctx }) => ({
        ...ctx.session.user
    }))
})

I am pretty sure I am missing something, but i am not sure what. Any help would be appricaited! 🙂 Thakn you!

8 Replies

cje•14mo ago

did you add it to the root router?

zilahirOP•14mo ago

yep, i did, if i call it like this:

const thisUser = await api.user.getUser.query()

const thisUser = await api.user.getUser.query()

it works.

cje•14mo ago

do the procedures that came with the template work?

zilahirOP•14mo ago

with the useQuery fn, it doesnt. and i am readong now the corresponding trpc docs, and it looks like the setup on my end is ok too i am assuming based on the docs, that this (from the template) should work:

const latestPost = await api.post.getLatest.useQuery();

const latestPost = await api.post.getLatest.useQuery();

but only the query fn exists on the getLatest

cje•14mo ago

are you in a server component? useQuery is a hook for client components it returns loading state etc using it in server components doesn't make any sense because you just await the data there which is what query does

zilahirOP•14mo ago

ohh yeah, i think thats going to be it. ive been just trying within the src/app/page.tsx from the ct3a template so yeah, thats it

cje•14mo ago

look at the difference between page.tsx and _components/create-post.tsx the first is a server component the second a client component

zilahirOP•14mo ago

i forgot about this completely 🙈 yep! thank you sir!

Gaming

Programming

ct3a with `react-query`