Any resources to learn the tRPC better? Hopefully with guides and examples?

Really struggling to learn otherwise in context of ct3 stack
12 Replies
erik.gh
erik.gh16mo ago
Create T3 App
tRPC 🚀 Create T3 App
The best way to start a full-stack, typesafe Next.js app.
whatplan
whatplan16mo ago
Josh tried coding
YouTube
Build Your First Application With the T3 Stack: NextJS, Typescript,...
In this beginner's project, we'll build a shopping list using the t3 stack: NextJS, Typescript, Tailwind, tRPC, Prisma, and Zod. These technologies can be implemented in any existing NextJS project and make working full-stack way more enjoyable than traditional NextJS API routes. This project on GitHub: https://github.com/joschan21/t3-shopping-...
Web Dev Cody
YouTube
An overview of the create T3 App (Next, Typescript, Tailwind, tRPC,...
Just giving a quick walkthrough of how the project is setup and explaining tRPC some ------------ 🤑 Patreon https://www.patreon.com/webdevjunkie 🔔 Newsletter http://eepurl.com/hnderP 💬 Discord https://discord.gg/4kGbBaa 📁. GitHub https://github.com/codyseibert/youtube
Jack Herrington
YouTube
T3: TRPC, Prisma and NextAuth Done Right
Let's try out TRPC using Theo's T3 application template that also integrates Prisma, NextAuth and Tailwind. And we'll use supabase and daisyui on top of that. Code: https://github.com/jherr/notetaker Try Scribe for free by downloading it here: https://scribe.how/jackherrington 👉 I'm a host on the React Round-Up podcast: https://devchat.tv/pod...
noctate
noctate16mo ago
What are the things that you find confusing
Simvolick
Simvolick16mo ago
This is not so useful for me, there are barely any examples Thanks! that looks promising. How do I get context as I understand tRPC 9 -> 10 changed quite a bit? Right now it is using tRPC to recieve an external API request based on input that user provided
Unknown User
Unknown User16mo ago
Message Not Public
Sign In & Join Server To View
noctate
noctate16mo ago
In one of my project I do it like this:
export const coinRouter = router({
getCoin: publicProcedure
.input(z.object({ name: z.string()}))
.query(async ({ input }) => {
const coin = await fetch(`https://api.coingecko.com/api/v3/coins/${input.name}?sparkline=true`).then(res =>
res.json());
const parsedData = coinResult.parse(coin)
return parsedData
})
})
export const coinRouter = router({
getCoin: publicProcedure
.input(z.object({ name: z.string()}))
.query(async ({ input }) => {
const coin = await fetch(`https://api.coingecko.com/api/v3/coins/${input.name}?sparkline=true`).then(res =>
res.json());
const parsedData = coinResult.parse(coin)
return parsedData
})
})
you can probably add something like error handling etc I also use zod to parse the data to know its shape but you don't have to do that But its recommended i think
isaac_way
isaac_way16mo ago
One important thing to note when learning trpc is that when using react, you’re also dealing with react query heavily (since trpc react api is just a react query wrapper). So to be good at trpc you’ll need to also know how to use react query
sal.tor
sal.tor16mo ago
@Simvolick do you have the sense that in the api changes something changed with context? And is there anything specifically you’re having trouble with?
JessesBeetShoppe
JessesBeetShoppe16mo ago
honestly the way ct3a is structured is really good for learning TRPC and the v10 docs are pretty great, if you haven't bashed it until it works for at least a couple of weeks of experimenting maybe check out these other resources but I do think the best way to learn it is by building stuff with it and solving problems as you go
Simvolick
Simvolick15mo ago
Yeah, I have another thread with the question in the discord, and the more new in the trpc discord. https://discord.com/channels/966627436387266600/1081477575240593438 https://discord.com/channels/867764511159091230/1083372118592462888
sal.tor
sal.tor15mo ago
I commented on yhe first link but i dont have access to ghat second one I can try and take a look to help in a few hours
Simvolick
Simvolick15mo ago
The second one is just trpc discord, there is the new code, i can probably duplicate the code