https://github.com/wpcodevo/nextjs14-trpc-react-query

In this comprehensive guide, we will explore the process of integrating tRPC, React Query v5, and Prisma within the Next.js 14 App Router. tRPC is a modern RPC framework that allows you to define your API using TypeScript interfaces and generates both server and client code for you.
https://github.com/wpcodevo/nextjs14-trpc-react-query

nextjs14 prisma react-query trpc trpc-client trpc-server

Last synced: about 2 months ago
JSON representation

In this comprehensive guide, we will explore the process of integrating tRPC, React Query v5, and Prisma within the Next.js 14 App Router. tRPC is a modern RPC framework that allows you to define your API using TypeScript interfaces and generates both server and client code for you.

• Host: GitHub
• URL: https://github.com/wpcodevo/nextjs14-trpc-react-query
• Owner: wpcodevo
• Created: 2024-01-18T20:28:23.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-19T18:18:31.000Z (about 1 year ago)
• Last Synced: 2024-10-31T09:37:06.869Z (3 months ago)
• Topics: nextjs14, prisma, react-query, trpc, trpc-client, trpc-server
• Language: TypeScript
• Homepage: https://codevoweb.com/using-trpc-with-nextjs-14-react-query-and-prisma/
• Size: 64.5 KB
• Stars: 22
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• my-awesome-list - nextjs14-trpc-react-query

README

        
# Using tRPC with Next.js 14, React Query and Prisma

In this comprehensive guide, we will explore the process of integrating tRPC, React Query v5, and Prisma within the Next.js 14 App Router. tRPC is a modern RPC framework that allows you to define your API using TypeScript interfaces and generates both server and client code for you. 

![Using tRPC with Next.js 14, React Query and Prisma](https://codevoweb.com/wp-content/uploads/2024/01/Using-tRPC-with-Next.js-14-React-Query-and-Prisma.webp)

### Topics Covered

- Bootstrapping the Next.js 14 Project

- Setting up PostgreSQL with Docker

- Setting up Prisma ORM

- Setting up tRPC Client and Server

  - Creating React Query Client

  - Initializing tRPC Server

  - Creating the tRPC API

  - Initializing the tRPC Client

  - Creating the tRPC Provider

- Testing the tRPC Server and Client

- Creating the tRPC Backend

  - Creating Validation Schemas

  - Creating tRPC Procedure Handlers

  - Creating tRPC Router

  - Merging tRPC Routers

- Creating the tRPC Frontend

  - Performing Query with tRPC

  - Performing Mutation with tRPC

  - Prefetching Data with tRPC and React Query

- Conclusion

Read the entire article here: [https://codevoweb.com/using-trpc-with-nextjs-14-react-query-and-prisma/](https://codevoweb.com/using-trpc-with-nextjs-14-react-query-and-prisma/)