Prezentacja z webinaru "GraphQL w React z wykorzystaniem Apollo" przeprowadzonej przez Michała Tomsie i Michała Czmiela.
Czy wiesz, że można zbudować aplikację bazując na danych dotyczących eksploracji kosmosu?
Dowiedz się jak to zrobić wykorzystując technologie takie jak React, GraphQL, Apollo Client i Apollo Server.
--
Join Boldare's newsletter to learn about a C-level point of view on user-centered design, software outsourcing services and the future of business.
Subscribe now --> https://go.boldare.com/newsletter-slideshare/
4. Follow us @boldarecom
Agenda
1. Wprowadzenie do GraphQL oraz Apollo
2. Instalacja i konfiguracja Apollo Client
3. Pobieranie danych
4. Krótkie wprowadzenie do Apollo Server
5. Zarządzanie stanem aplikacji
6. Generowanie kodu
7. Problemy oraz inne funkcjonalności
8. Przyszłość Apollo
9. Q & A
5. Follow us @boldarecom
GraphQL
Język zapytań wykorzystywany do obsługi
API, oferujący elastyczność w kontekście
określania kształtu danych pobieranych
z serwera.
6. Follow us @boldarecom
GraphQL vs REST
● jeden endpoint
● w zapytaniu określamy dokładnie
strukturę danych, które są nam
potrzebne
● nie ma potrzeby wersjonowania API
● redukcja liczby zapytań do serwera
10. Resolver
root - rezultat wywołania funkcji
resolvera dla rodzica
args - argumenty przesłane do pola w
zapytaniu
context - mutowalny obiekt, który jest
przesyłany
do wszystkich resolverów
info - informacje specyficzne dla danego
pole, które są istotne dla zapytania
# domyślne resolvery
Launchpad: {
status: (root, args, context, info) =>
root.status,
}
11. Follow us @boldarecom
Apollo
● Apollo Client 12.3k ⭐
○ klient
○ oficjalne (React, iOS)
○ nieoficjalne (Vue, Svelte, Angular)
● Apollo Server 8.3k ⭐
○ Node.js GraphQl API
● Apollo Graph Manager
○ usługa chmurowa serwująca API GraphQL
12. Follow us @boldarecom
Instalacja
● Apollo-boost
○ bazowa, rekomendowana konfiguracja
Apollo client
● @apollo/react-hooks
○ API wykorzystujące React Hooks
● Graphql
○ Obsługa języka GraphQL
17. Follow us @boldarecom
Cache zapytań
● Automatyczny, znormalizowany cache
● obiekt => obiekt & { id, __typename }
● Zawsze albo nigdy __typename
● Update po mutacji
● dataIdFromObject
○ własne generowanie kluczy cache
18. Follow us @boldarecom
Apollo Server
● Node.js
● Zgodny ze standardem GraphQL
● Podstawowe komponenty
○ typedefs (jakie dane możemy otrzymać)
○ resolvers (jak otrzymać te dane)
19. Apollo Server
import { ApolloServer } from “apollo-server”
const server = new ApolloServer({
typeDefs,
resolvers,
playground,
});
server.listen().then(({ url ) => {
console.log(`Server ready at ${url}`);
});
26. Follow us @boldarecom
Dobre praktyki
● Zapytania obok ich użycia
● Jeden obiekt argumentów zamiast listy
● Kompilacja zapytań w czasie budowania
○ babel-plugin-graphql-tag
● Nie nadużywaj metaprogramowania
○ Przykład: Generowanie __typename lub
zapytań w runtime
27. Follow us @boldarecom
Tooling
● Generacja kodu
○ @graphql-codegen
● Edytor
○ Apollo GraphQL (VSC)
● Lintowanie
○ eslint-plugin-graphql
● Debugowanie
○ Apollo Client Developer Tools (Chrome)
28. Follow us @boldarecom
Graphql Code Gen
● codegen.yaml
● Generowanie typów, skalarów oraz typów
zapytań
● Generowanie hooków do pobierania zasobów
● Możliwość uruchomienia jako prehook lub
podczas CI
29. Follow us @boldarecom
Apollo Client 3.0
Zmiany w dependencies
● apollo-boost -> @apollo/client
● apollo-link-state -> @apollo/client
● @apollo/react-hooks -> @apollo/client