Theo uses api.posts.getAll.useQuery() in T3 tutorial video, but T3 app only has .query() calls.
Where did Theo got .useQuery() methods? I only have .query()
https://youtu.be/YkOSUVzOAA4?t=2211
Theo - t3․gg
YouTube
T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...
I've never worked this hard on a video before. I really hope y'all can benefit from this 🙏
GITHUB REPO https://github.com/t3dotgg/chirp
DEPLOYED APP https://xn--uo8h.t3.gg/
GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/
ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg
Everything else (Twitch, Twitter, Discor...
10 Replies
they are the same thing
just the naming has been changed
the video is like 9 months old
i think because in the video theo is using the pages router and you might be using the app router
Yes, I selected 'App router' when creating the T3 app!
well things are different in the app router
dont worry
just the naming convention has changed, functionality remains the same
If you import api from trpc/react, you will have access to useQuery because it functions as a client component, utilizing React Query. In the case of a server component, you would import api from trpc/server and use .query() as a promise.
ohhhhh
damnn
If you are using trpc inside a server component then you cannot use hooks (like useQuerry), and instead you can use the promises which is what the server.ts file exports. That's why there are two in the app router configuratoin.
There are two apis in App Router. One is for server and the other is a tRPC hook that you can use in server components
In this case you are importing from server. If that’s what you want, you can use it like that no problem in the server component
I understand that there are two ways to fetch via trpc (client and server), but what if I want to make a request on a button click? I can't use useQuery() because it is a hook. Does anyone know how to make the request without the hook?
In rsc or client component?
It's because
useQuery is a hook, and React requires all hooks to start with use.
You useQuery in Client Components. This handles isLoading, error, and refetch too.
or you could just await the query in Server Components, which directly returns the data
useQuery
- only works in Client Components
- imported from ~/trpc/react
- handles errors, loading status, refetching
query
- only works in Server Components
- imported from ~/trpc/server
- errors and loading are handled by Next.js (you can customize that)
- refetch with revalidatePath()