Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL vs REST API - Kto wygra?

GraphQL vs REST API - Kto wygra?

Co to jest GraphQL i czym różni się od REST API?
Czy warto w ogóle uczyć się GraphQL?
Kiedy warto używać jednego lub drugiego?
Odpowiedzi na te pytania znajdziesz w tej prezentacji!

85977ebfe59c2ee669f2196930f1a701?s=128

Michał Taszycki

November 27, 2020
Tweet

Transcript

  1. GRAPHQL VS REST API KTO WYGRA?

  2. KIM JESTEM? ▸ Michał Taszycki (@mehowte) ▸ 16 lat doświadczenia

    w programowaniu ▸ Twórca programów szkoleniowych ▸ GraphQL Mastery ▸ Kurs Reacta ▸ Organizator Festiwalu React.js i GraphQL
  3. CO TO JEST REST API?

  4. CO TO JEST REST API? 1. Ścisła specyfikacja architektury API

    serwera
  5. CO TO JEST REST API? 1. Ścisła specyfikacja architektury API

    serwera 2. Potoczna nazwa wszystkich API, które zwraca JSON ;)
  6. SERWER MA RÓŻNE ZASOBY • Książki •Autorzy •Użytkownicy •Egzemplarze książek

  7. ZASOBY MAJĄ OPERACJE • Książki (pobierz listę, pobierz detale) •Autorzy

    (pobierz listę, pobierz detale) •Użytkownicy (zaloguj, edytuj, pobierz listę) •Egzemplarze książek (wypożycz, oddaj)
  8. OPERACJE MAJĄ METODĘ HTTP I URL • GET example.com/books (pobierz

    listę książek) •GET example.com/books/32 (pobierz szczegóły książki o id 32)
  9. OPERACJE MAJĄ METODĘ HTTP I URL • POST example.com/users (dodaj

    użytkownika) •PUT lub PATCH example.com/users/44 (uaktualnij użytkownika o id 44) •PUT lub PATCH example.com/users/45 (usuń użytkownika o id 45)
  10. OPERACJE MAJĄ METODĘ HTTP I URL • POST example.com/users (dodaj

    użytkownika) •PUT lub PATCH example.com/users/44 (uaktualnij użytkownika o id 44) •DELETE example.com/users/45 (usuń użytkownika o id 45)
  11. TO DZIAŁA W OPERACJACH CRUD •POST tworzy •GET pobiera bez

    modyfikacji •PUT lub PATCH uaktualnia •DELETE usuwa CREATE READ UPDATE DELETE
  12. W NIETYPOWYCH OPERACJACH JEST TRUDNIEJ • PUT example.com/login (zaloguj użytkownika

    - modyfikacja użytkownika) •PUT example.com/logout (wyloguj użytkownika - modyfikacja użytkownika)
  13. W NIETYPOWYCH OPERACJACH JEST TRUDNIEJ • POST example.com/session (zaloguj użytkownika

    - stwórz sesję) •DELETE example.com/session (wyloguj użytkownika - usuń sesję)
  14. • PUT example.com/users/44/book-copies/12?borrow (wypożycz od użytkownika 44 egzemplarz książki 12

    zmodyfikuj zasób egzemplarza) •PUT example.com/users/44/book-copies/12?return (oddaj użytkownikowi 44 egzemplarz książki 12 zmodyfikuj zasób egzemplarza) W NIETYPOWYCH OPERACJACH JEST TRUDNIEJ
  15. • POST example.com/book-rentals (wypożycz egzemplarz książki - stwórz zasób wypożyczenia)

    •DELETE example.com/book-rentals (oddaj egzemplarz książki - usuń zasób wypożyczenia) W NIETYPOWYCH OPERACJACH JEST TRUDNIEJ
  16. 1. Nie wszystko jest ustandaryzowane 2. Overfetching 3. Underfetching 4.

    Dużo zapytań 5. Dokumentacja? PROBLEMY Z REST API
  17. OVERFETCHING

  18. 1. Wypisz listę książek - tylko id i tytuły OVERFETCHING

  19. 1. Wypisz listę książek - tylko id i tytuły 2.

    Z API przychodzi za dużo danych (ISBN, opis, pierwszy rozdział, …) OVERFETCHING
  20. 1. Wypisz listę książek - tylko id i tytuły 2.

    Z API przychodzi za dużo danych (ISBN, opis, pierwszy rozdział, …) 3. Dodaj parametr do url? (GET example.com/books?only=title,id) OVERFETCHING
  21. 1. Wypisz listę książek - tylko id i tytuły 2.

    Z API przychodzi za dużo danych (ISBN, opis, pierwszy rozdział, …) 3. Dodaj parametr do url? (GET example.com/books?only=title,id) 4. To nie jest STANDARD :( OVERFETCHING
  22. UNDERFETCHING

  23. 1. Wypisz listę książek - tytuł książki i nazwisko autora

    UNDERFETCHING
  24. 1. Wypisz listę książek - tytuł książki i nazwisko autora

    2. GET example.com/books?only=id,title,author_id UNDERFETCHING
  25. 1. Wypisz listę książek - tytuł książki i nazwisko autora

    2. GET example.com/books?only=id,title,author_id 3. Dla każdego ID autora (GET example.com/authors/<author_id> ) UNDERFETCHING
  26. 1. Wypisz listę książek - tytuł książki i nazwisko autora

    2. GET example.com/books?only=id,title,author_id 3. Dla każdego ID autora (GET example.com/authors/<author_id> ) 4. Problem N+1 i overfetching dla autorów. UNDERFETCHING
  27. ZA DUŻO ZAPYTAŃ

  28. 1. Wyświetl dashboard w aplikacji ZA DUŻO ZAPYTAŃ

  29. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 ZA DUŻO

    ZAPYTAŃ
  30. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 3. GET

    example.com/users/42/books ZA DUŻO ZAPYTAŃ
  31. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 3. GET

    example.com/users/42/books 4. GET example.com/users/42/authors?favorite=true ZA DUŻO ZAPYTAŃ
  32. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 3. GET

    example.com/users/42/books 4. GET example.com/users/42/authors?favorite=true 5. GET example.com/book-copies?borrowedAt=today ZA DUŻO ZAPYTAŃ
  33. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 3. GET

    example.com/users/42/books 4. GET example.com/users/42/authors?favorite=true 5. GET example.com/book-copies?borrowedAt=today 6. GET example.com/quotes/random ZA DUŻO ZAPYTAŃ
  34. 1. Wyświetl dashboard w aplikacji 2. GET example.com/users/42 3. GET

    example.com/users/42/books 4. GET example.com/users/42/authors?favorite=true 5. GET example.com/book-copies?borrowedAt=today 6. GET example.com/quotes/random 7. GET example.com/weather-forecast ZA DUŻO ZAPYTAŃ
  35. OK… A GRAPHQL?

  36. 1. Ścisła specyfikacja API klienta i serwera OK… A GRAPHQL?

  37. 1. Ścisła specyfikacja API klienta i serwera 2. Którą WSZYSCY

    respektują! OK… A GRAPHQL?
  38. GRAPHQL W PIGUŁCE

  39. 1. Jeden endpoint GRAPHQL W PIGUŁCE

  40. 1. Jeden endpoint 2. Zwykle POST example.com/graphql GRAPHQL W PIGUŁCE

  41. 1. Jeden endpoint 2. Zwykle POST example.com/graphql 3. Serwer definiuje

    schemat danych GRAPHQL W PIGUŁCE
  42. 1. Jeden endpoint 2. Zwykle POST example.com/graphql 3. Serwer definiuje

    schemat danych 4. Klient ma prosty język zapytań GRAPHQL W PIGUŁCE
  43. 1. Jeden endpoint 2. Zwykle POST example.com/graphql 3. Serwer definiuje

    schemat danych 4. Klient ma prosty język zapytań 5. Można robić wiele rzeczy na raz! GRAPHQL W PIGUŁCE
  44. CO ROBIMY W GRAPHQL?

  45. 1. Z serwera dostajemy dokumentację API (automatycznie wygenerowaną) CO ROBIMY

    W GRAPHQL?
  46. 1. Z serwera dostajemy dokumentację API (automatycznie wygenerowaną) 2. Odpytujemy

    o dane za pomocą zapytań (Query) CO ROBIMY W GRAPHQL?
  47. 1. Z serwera dostajemy dokumentację API (automatycznie wygenerowaną) 2. Odpytujemy

    o dane za pomocą zapytań (Query) 3. Modyfikujemy dane mutacjami (Mutation) CO ROBIMY W GRAPHQL?
  48. GRAPHQL SCHEMA

  49. AUTOMATYCZNA DOKUMENTACJA

  50. ZAPYTANIA GRAPHQL

  51. ZAPYTANIA GRAPHQL

  52. ZAPYTANIA GRAPHQL

  53. ZAPYTANIA GRAPHQL

  54. ZAPYTANIA GRAPHQL

  55. ZAPYTANIA GRAPHQL

  56. ZAPYTANIA GRAPHQL

  57. MUTACJE GRAPHQL

  58. MUTACJE GRAPHQL

  59. MUTACJE GRAPHQL

  60. MUTACJE GRAPHQL

  61. MUTACJE GRAPHQL

  62. MUTACJE GRAPHQL

  63. MUTACJE GRAPHQL

  64. MUTACJE GRAPHQL

  65. MUTACJE GRAPHQL

  66. MUTACJE GRAPHQL

  67. MUTACJE GRAPHQL

  68. PROBLEMY GRAPHQL

  69. PROBLEMY GRAPHQL 1. Cache 2. Optymalizacja złożonych zapytań 3. Denial

    of Service
  70. PROBLEMY GRAPHQL

  71. PROBLEMY GRAPHQL ☠

  72. CO WYBRAĆ?

  73. DLACZEGO REST?

  74. DLACZEGO REST? 1. Publicznie dostępne API (REST łatwiej zabezpieczyć)

  75. DLACZEGO REST? 1. Publicznie dostępne API (REST łatwiej zabezpieczyć) 2.

    Stabilne API (w REST trudniej wprowadzać zmiany)
  76. DLACZEGO REST? 1. Publicznie dostępne API (REST łatwiej zabezpieczyć) 2.

    Stabilne API (w REST trudniej wprowadzać zmiany) 3. Aplikacja to typowy CRUD (wystarczy GET, POST, PUT, DELETE)
  77. DLACZEGO REST? 1. Publicznie dostępne API (REST łatwiej zabezpieczyć) 2.

    Stabilne API (w REST trudniej wprowadzać zmiany) 3. Aplikacja to typowy CRUD (wystarczy GET, POST, PUT, DELETE) 4. Aplikacja ma już swoje lata :)
  78. DLACZEGO GRAPHQL?

  79. DLACZEGO GRAPHQL? Bo to sama przyjemność! :)

  80. DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą

    innych danych)
  81. DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą

    innych danych) 2. Prototypowanie i startupy (w GraphQL łatwiej wprowadzać zmiany)
  82. DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą

    innych danych) 2. Prototypowanie i startupy (w GraphQL łatwiej wprowadzać zmiany) 3. Aplikacja to nie tylko CRUD (w GraphQL łatwiej modelować zdarzenia biznesowe)
  83. DLACZEGO GRAPHQL? 1. Wewnętrzne API (mobilne i webowe apki chcą

    innych danych) 2. Prototypowanie i startupy (w GraphQL łatwiej wprowadzać zmiany) 3. Aplikacja to nie tylko CRUD (w GraphQL łatwiej modelować zdarzenia biznesowe) 4. Integracja danych z różnych źródeł (1 serwer proxy w GraphQL)
  84. DEMO 1. GraphQL https://graphql.org/swapi-graphql 2. REST https://swapi.dev/

  85. NAGRANIE I SLAJDY https://graphqlmastery.pl/graphql-vs-rest-replay