Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 46 Publicité

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL

Télécharger pour lire hors ligne

W ramach tej prezentacji pokażę jak efektywnie wykorzystać GraphQL `codegen` do generowania hooków i typów, które pomogą obsłużyć dowolne query i mutation, czyniąc kod nie tylko czytelniejszym, ale również łatwiejszym w utrzymaniu. W tym celu wspólnie postawimy przykładowy projekt, a także poświęcimy kilka minut na skonfigurowanie IDE. Dzięki temu nasza codzienna praca stanie się przyjemniejsza i efektywniejsza.

W ramach tej prezentacji pokażę jak efektywnie wykorzystać GraphQL `codegen` do generowania hooków i typów, które pomogą obsłużyć dowolne query i mutation, czyniąc kod nie tylko czytelniejszym, ale również łatwiejszym w utrzymaniu. W tym celu wspólnie postawimy przykładowy projekt, a także poświęcimy kilka minut na skonfigurowanie IDE. Dzięki temu nasza codzienna praca stanie się przyjemniejsza i efektywniejsza.

Publicité
Publicité

Plus De Contenu Connexe

Plus par The Software House (20)

Plus récents (20)

Publicité

Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL

  1. 1. Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL
  2. 2. Jak wdrożyć GraphQL do aplikacji w React.js
  3. 3. Jak generator kodu GraphQL może ułatwić nam życie?
  4. 4. Plan na dziś ● Wprowadzenie do GraphQL ● Od fetcha do finalnego rozwiązania, czyli problemy wynikające z kolejnych warstw abstrakcji ● Konfiguracja projektu Reactowego z Apollo Client i GraphQL Codgen ● Wspólne przejście przez workflow ale najpierw…
  5. 5. Cześć 👋 Szymon Chudy Frontend Developer @The Software House jestem Szymon ;)
  6. 6. Czym jest GraphQL? w wielkim skrócie
  7. 7. Czym jest GraphQL? ● Język zapytań, który umożliwia pobieranie danych w sposób dynamiczny i bardzo elastyczny ● Serwer GraphQL udostępnia jeden endpoint, który obsługuje zapytania, które możemy definiować wedle potrzeb ● Definiujemy je używając SDL i wykorzystując do tego metodę POST (w wielkim skrócie)
  8. 8. SDL? Schema Definition Language
  9. 9. Czym jest SDL? ● To język typowany o bardzo prostej składni, która pozwala zwięźle zdefiniować schemat danych… (w wielkim skrócie)
  10. 10. Czym jest SDL? ● To język typowany o bardzo prostej składni, która pozwala zwięźle zdefiniować schemat danych… ● … oraz określić sposoby ich pozyskiwania i modyfikowania, czyli queries i mutations (w wielkim skrócie)
  11. 11. Ale jak to ma się do frontendu? miło, że pytacie ;-)
  12. 12. Standardowy GraphQL POST request wykorzystuje content-type application/json, i zawiera body w formie: GraphQL POST Request query string – obowiązkowe nieobowiązkowe (zazwyczaj) nieobowiązkowe jeśli nie korzystamy ze zmiennych w query
  13. 13. I to ma być takie fajne? jeszcze nie…
  14. 14. Typowe problemy z fetchowaniem danych ● State, cache ● Kontrolki ● Errors ● Rozdzielenie warstwy UI od logiki fetchującej dane ● Rozwój i utrzymywanie aplikacji Na szczęście nie musimy wymyślać koła na nowo ;-)
  15. 15. Kolejne warstwy abstrakcji
  16. 16. ● automatyzacja tworzenia hooków ● automatyzacja tworzenia typów ● możliwość korzystania ze schemy lokalnej lub z tzw. introspection query ● niezliczone możliwości konfiguracyjne
  17. 17. Apollo Client + GraphQL Code Generator
  18. 18. $ npm i @apollo/client graphql $ npm i -D @graphql-codegen/cli @graphql-codegen/near-operation-file-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo Przykłady, do których przechodzimy zakładają, że startujemy z czystą aplikacją utworzoną z wykorzystaniem create-react-app Instalacja zależności
  19. 19. Wpinamy Apollo do Reacta
  20. 20. Skrypt do generowania kodu ( package.json ) przydatne jeśli chcecie zmienić nazwę pliku konfiguracyjnego lub wskazać ją ’explicite’ dzięki dołączeniu “dotenv” możemy wykorzystywać zmienne środowiskowe w pliku konfiguracyjnym!
  21. 21. Konfiguracja generatora ( codegen.yml ) lub .ts, .js, .json
  22. 22. Konfiguracja generatora string or string[ ] required
  23. 23. API URL .json file (that contains GraphQL Introspection JSON) Local .graphql files schema.graphql src/**/*.graphql [] !*.generated.graphql
  24. 24. Konfiguracja generatora string or string[ ]
  25. 25. Local .graphql files src/**/*.graphql src/documents/**/*.gql Documents Scanner src/**/!(*.d).{ts,tsx}
  26. 26. Konfiguracja generatora required required required poziom globalny
  27. 27. to commit or not to commit?
  28. 28. (Work)flow 🥰
  29. 29. 1. Tworzymy plik GetTask.gql w folderze src/documents query GetTask($taskId: ID!) { task(id: $taskId) { name description } } 2. Generujemy typy i operacje za pomocą skryptu generate $ npm run generate tak będą nazywały się hooki
  30. 30. i voilà ;-)
  31. 31. Dokładnie tak samo możemy zrobić z mutation
  32. 32. 1. Tworzymy plik AddTask.gql w folderze src/documents mutation AddTask($taskInput: AddTaskInput!) { addTask(task: $taskInput) { id name description priority } } 2. Generujemy typy i operacje za pomocą skryptu generate $ npm run generate
  33. 33. Konfiguracja IDE
  34. 34. { "extensions": { "endpoints": { "Default GraphQL Endpoint": { "url": "${env:REACT_APP_API_URL}", "schemaPath": "schema.graphql", "headers": { "user-agent": "JS GraphQL" } } } } } .graphqlconfig { "schema": "schema.graphql" "schema": "https://graphqlzero.almansi.me/api" } .graphqlrc
  35. 35. Dziękuję

×