tRPC - czy to koniec GraphQL?

Brainhub
BrainhubBrainhub
tRPC - czy to koniec GraphQL?
since 2015
Our team of 100 people work
remotely and from offices
in Gliwice & Wroclaw
Our top clients:
Our best technologies:
Hall of fame:
tRPC - czy to koniec
GraphQL?
Angelika Jeziorska
JavaScript Full Stack Developer
Wrocław, 20.04.2023
tRPC - czy to koniec GraphQL?
Co to tRPC?
● Biblioteka do budowania api z pełnym type-safety.
● Pod spodem HTTP GET i POST.
● Frontowy klient zbudowany na React (TanStack) Query.
● Wsparcie subskrypcji i WebSocketów.
● Nie wymaga generowania i/lub utrzymywania typów → wystarczy walidator.
Skąd front zna typy?
Walidacja inputów
● yup
● superstruct
● zod/myzod
● własny walidator
Do jakich rozwiązań?
● TypeScript (front i back)
● React/Next.js
● Monorepo
Czemu nie REST lub GraphQL?
Podstawowe koncepcje
● Router.
● Procedury - ekwiwalent endpointu RESTowego lub lambdy.
● Context - informacje przydatne dla procedur.
● API Handler - backend, w którym żyje tRPC.
Aktualnie dostępne adaptery
● AWS Lambda/Serverless,
● Express,
● edge runtimes (Next.js),
● Fastify.
Jak ograniczyć dostęp do endpointu?
Prawa nadawane inkrementacyjnie → middleware uruchamiany przed procedurą
Odrębne uprawnienia -> tRPC Shield.
const isAuthenticated = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user !== null
})
const isAdmin = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user.role === 'admin'
})
const isEditor = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user.role === 'editor'
})
const permissions = shield<Context>({
query: {
frontPage: not(isAuthenticated),
fruits: and(isAuthenticated, or(isAdmin, isEditor)),
customers: and(isAuthenticated, isAdmin),
},
});
To czemu wszyscy z niego nie korzystają?
Wersja v10 (listopad 2022)
● Dodanie wielu funkcjonalności IDE (Go to Definition, Rename Symbol itd.).
● Middleware, reużywalne i chainowalne procedury.
● Poprawiony syntax.
● Lepszy performance TypeScripta w dużych projektach.
Spośród dużych graczy wykorzystujących tRPC jest Netflix i Pleo (cash back).
Potencjalne problemy
● CRONy
● Integrowanie narzędzi przez context
● brak konwencji
Kiedy warto wykorzystać?
● Mając fullstacków w projekcie.
● Chcąc wykonać wiele operacji, których logika nie jest powiązana lub może być
współdzielona.
● W aplikacjach real-time.
Materiały
● tRPC Docs: https://trpc.io/docs/
● T3 stack: https://create.t3.gg/
Dziękuję!
1 of 21

Recommended

Konfiguracja GitLab CI/CD pipelines od podstaw by
Konfiguracja GitLab CI/CD pipelines od podstawKonfiguracja GitLab CI/CD pipelines od podstaw
Konfiguracja GitLab CI/CD pipelines od podstawBrainhub
128 views11 slides
Solid.js - następca Reacta? by
Solid.js - następca Reacta?Solid.js - następca Reacta?
Solid.js - następca Reacta?Brainhub
51 views26 slides
Struktury algebraiczne w JavaScripcie by
Struktury algebraiczne w JavaScripcieStruktury algebraiczne w JavaScripcie
Struktury algebraiczne w JavaScripcieBrainhub
59 views71 slides
WebAssembly - czy dzisiaj mi się to przyda do pracy? by
WebAssembly - czy dzisiaj mi się to przyda do pracy?WebAssembly - czy dzisiaj mi się to przyda do pracy?
WebAssembly - czy dzisiaj mi się to przyda do pracy?Brainhub
46 views29 slides
Ewoluowanie neuronowych mózgów w JavaScript, wielowątkowo! by
Ewoluowanie neuronowych mózgów w JavaScript, wielowątkowo!Ewoluowanie neuronowych mózgów w JavaScript, wielowątkowo!
Ewoluowanie neuronowych mózgów w JavaScript, wielowątkowo!Brainhub
44 views60 slides
Go home TypeScript, you're drunk! by
Go home TypeScript, you're drunk!Go home TypeScript, you're drunk!
Go home TypeScript, you're drunk!Brainhub
580 views17 slides

More Related Content

More from Brainhub

TDD in the wild by
TDD in the wildTDD in the wild
TDD in the wildBrainhub
128 views50 slides
WebAssembly - kolejny buzzword, czy (r)ewolucja? by
WebAssembly - kolejny buzzword, czy (r)ewolucja?WebAssembly - kolejny buzzword, czy (r)ewolucja?
WebAssembly - kolejny buzzword, czy (r)ewolucja?Brainhub
106 views39 slides
React performance by
React performanceReact performance
React performanceBrainhub
196 views11 slides
Introduction to RxJS by
Introduction to RxJSIntroduction to RxJS
Introduction to RxJSBrainhub
3.7K views28 slides
React Native in a nutshell by
React Native in a nutshellReact Native in a nutshell
React Native in a nutshellBrainhub
718 views12 slides
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence) by
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)Brainhub
951 views71 slides

More from Brainhub(14)

TDD in the wild by Brainhub
TDD in the wildTDD in the wild
TDD in the wild
Brainhub128 views
WebAssembly - kolejny buzzword, czy (r)ewolucja? by Brainhub
WebAssembly - kolejny buzzword, czy (r)ewolucja?WebAssembly - kolejny buzzword, czy (r)ewolucja?
WebAssembly - kolejny buzzword, czy (r)ewolucja?
Brainhub106 views
React performance by Brainhub
React performanceReact performance
React performance
Brainhub196 views
Introduction to RxJS by Brainhub
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
Brainhub3.7K views
React Native in a nutshell by Brainhub
React Native in a nutshellReact Native in a nutshell
React Native in a nutshell
Brainhub718 views
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence) by Brainhub
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)
Ant Colony Optimization (Heuristic algorithms & Swarm intelligence)
Brainhub951 views
Technologia, a Startup - Brainhub by Brainhub
Technologia, a Startup - BrainhubTechnologia, a Startup - Brainhub
Technologia, a Startup - Brainhub
Brainhub441 views
Introduction to GraphQL by Brainhub
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
Brainhub3.3K views
How should you React to Redux by Brainhub
How should you React to ReduxHow should you React to Redux
How should you React to Redux
Brainhub3.8K views
Wprowadzenie do React by Brainhub
Wprowadzenie do ReactWprowadzenie do React
Wprowadzenie do React
Brainhub787 views
JavaScript and Desktop Apps - Introduction to Electron by Brainhub
JavaScript and Desktop Apps - Introduction to ElectronJavaScript and Desktop Apps - Introduction to Electron
JavaScript and Desktop Apps - Introduction to Electron
Brainhub4.9K views
Why and How You Should Move from PHP to Node.js by Brainhub
Why and How You Should Move from PHP to Node.jsWhy and How You Should Move from PHP to Node.js
Why and How You Should Move from PHP to Node.js
Brainhub5.1K views
All you need to know about Callbacks, Promises, Generators by Brainhub
All you need to know about Callbacks, Promises, GeneratorsAll you need to know about Callbacks, Promises, Generators
All you need to know about Callbacks, Promises, Generators
Brainhub812 views
Lexical scope, function vs. block scope, hoisting, scope closures by Brainhub
Lexical scope, function vs. block scope, hoisting, scope closuresLexical scope, function vs. block scope, hoisting, scope closures
Lexical scope, function vs. block scope, hoisting, scope closures
Brainhub505 views

tRPC - czy to koniec GraphQL?

  • 3. Our team of 100 people work remotely and from offices in Gliwice & Wroclaw
  • 4. Our top clients: Our best technologies:
  • 6. tRPC - czy to koniec GraphQL? Angelika Jeziorska JavaScript Full Stack Developer Wrocław, 20.04.2023
  • 8. Co to tRPC? ● Biblioteka do budowania api z pełnym type-safety. ● Pod spodem HTTP GET i POST. ● Frontowy klient zbudowany na React (TanStack) Query. ● Wsparcie subskrypcji i WebSocketów. ● Nie wymaga generowania i/lub utrzymywania typów → wystarczy walidator.
  • 10. Walidacja inputów ● yup ● superstruct ● zod/myzod ● własny walidator
  • 11. Do jakich rozwiązań? ● TypeScript (front i back) ● React/Next.js ● Monorepo
  • 12. Czemu nie REST lub GraphQL?
  • 13. Podstawowe koncepcje ● Router. ● Procedury - ekwiwalent endpointu RESTowego lub lambdy. ● Context - informacje przydatne dla procedur. ● API Handler - backend, w którym żyje tRPC.
  • 14. Aktualnie dostępne adaptery ● AWS Lambda/Serverless, ● Express, ● edge runtimes (Next.js), ● Fastify.
  • 15. Jak ograniczyć dostęp do endpointu? Prawa nadawane inkrementacyjnie → middleware uruchamiany przed procedurą Odrębne uprawnienia -> tRPC Shield.
  • 16. const isAuthenticated = rule<Context>()(async (ctx, type, path, input, rawInput) => { return ctx.user !== null }) const isAdmin = rule<Context>()(async (ctx, type, path, input, rawInput) => { return ctx.user.role === 'admin' }) const isEditor = rule<Context>()(async (ctx, type, path, input, rawInput) => { return ctx.user.role === 'editor' }) const permissions = shield<Context>({ query: { frontPage: not(isAuthenticated), fruits: and(isAuthenticated, or(isAdmin, isEditor)), customers: and(isAuthenticated, isAdmin), }, });
  • 17. To czemu wszyscy z niego nie korzystają? Wersja v10 (listopad 2022) ● Dodanie wielu funkcjonalności IDE (Go to Definition, Rename Symbol itd.). ● Middleware, reużywalne i chainowalne procedury. ● Poprawiony syntax. ● Lepszy performance TypeScripta w dużych projektach. Spośród dużych graczy wykorzystujących tRPC jest Netflix i Pleo (cash back).
  • 18. Potencjalne problemy ● CRONy ● Integrowanie narzędzi przez context ● brak konwencji
  • 19. Kiedy warto wykorzystać? ● Mając fullstacków w projekcie. ● Chcąc wykonać wiele operacji, których logika nie jest powiązana lub może być współdzielona. ● W aplikacjach real-time.
  • 20. Materiały ● tRPC Docs: https://trpc.io/docs/ ● T3 stack: https://create.t3.gg/