tRPC (Type-safe Remote Procedure Call) is a modern framework for building APIs that prioritizes type safety and ease of use. It ensures that the communication between server and client is type-safe, meaning that the data structures and functions used are explicitly defined and enforced, reducing the risk of runtime errors. tRPC simplifies the development process by generating TypeScript types on the client side based on the server-defined API, enabling seamless and error-resistant communication. With a focus on developer ergonomics, tRPC aims to make API development robust and efficient, allowing developers to work confidently and effectively across different parts of the application.
Demo Page for tRPC : /trpc/example
Your can perform the basic CRUD operations on this route. It operates on the tables present on our mongoDB server.
As stored in MongoDB. Here "_id" and "__v" are the fields which are filled by mongoDB itself
ID : Number
Name : String
Github : String
_id : String
__v : String
1
2
const { data: crudReadData, error: crudReadError } =
trpc.crudRead.useQuery();
1
2
3
4
5
6
const createMutation = trpc.crudCreate.useMutation();
createMutation.mutate({
id: 1,
name: "New Item",
github: "new-item",
})
1
2
3
4
5
6
const updateMutation = trpc.crudUpdate.useMutation();
updateMutation.mutate({
id: crudReadData?.data.slice(-1)[0]._id,
name: "Updated Item",
github: "updated-item",
})
1
2
3
4
const deleteMutation = trpc.crudDelete.useMutation();
deleteMutation.mutate({
id: crudReadData?.data.slice(-1)[0]._id,
})
You can get 2 types of news on the same route using query params used in REST APIs
You can get high amount of NEWS, which are not filtered based on the fields related
1
2
const { data: newsData, error: newsError } =
trpc.news.useQuery({ type: 'all' });
You can get hundred of NEWS, which are filtered based on the fields related
1
2
const { data: sportsNewsData, error: sportsNewsError } =
trpc.news.useQuery({ type: "sports" });
1. all
2. general
3. entertainment
4. business
5. health
6. science
7. sports
8. technology
You can get movie data for your movie projects!
You can get high quality data for Movies.
1
2
const { data: movieData, error: movieError } =
trpc.movie.useQuery();
You can get Anime data for your Anime realted projects!
You can get high quality data for Animes.
1
2
const { data: animeData, error: animeError } =
trpc.anime.useQuery();
You can get Manga data for your Manga realted projects!
You can get high quality data for Manga.
1
2
const { data: mangaData, error: mangaError } =
trpc.manga.useQuery();
Type Safety: : Ensures type safety in communication between server and client, reducing the likelihood of runtime errors.
Automatic TypeScript Generation : Automatically generates TypeScript types on the client side based on the server-defined API, enhancing development efficiency.
Developer-Friendly : Prioritizes developer ergonomics, making it easy to work with and understand, leading to faster development cycles.
Simplified Communication : Simplifies API development by eliminating the need for manual type mappings and reducing boilerplate code.
Robustness : Enhances robustness by enforcing a strict contract between the server and client, reducing the chances of miscommunications.
Learning Curve: As with any new technology, there might be a learning curve for developers unfamiliar with tRPC.
Limited Ecosystem: Depending on the adoption rate, there might be a limited ecosystem and community support compared to more established frameworks.
Flexibility Trade-off: While type safety is a significant advantage, it might limit the flexibility in certain scenarios where dynamic typing is preferred.
Potential Overhead: Depending on the use case, the automatic generation of TypeScript types might introduce some overhead in terms of file size.
Potential Overhead: As tRPC heavily relies on TypeScript, projects not using TypeScript might find it less suitable.