GraphQL w React z wykorzystaniem Apollo

Follow us @boldarecom
GraphQL w React
z wykorzystaniem
Apollo

Michał Tomsia
Software Developer @Boldare

Michał Czmiel
Software Developer @Boldare

Agenda
1. Wprowadzenie do GraphQL oraz Apollo
2. Instalacja i konﬁguracja 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

GraphQL
Język zapytań wykorzystywany do obsługi
API, oferujący elastyczność w kontekście
określania kształtu danych pobieranych
z serwera.

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

Query
query launchpadInfo {
launchpads {
id
status
launches(first: 3) {
flight_number
mission_name
}
}
}

Schema
type Query {
launchpads: [Launchpad]
}
type Mutation {
addLaunchpad(input: AddLaunchpadInput!): Launchpad!
updateLaunchpadStatus(status: String): Launchpad!
}
type Subscription {
launchpadAdded: Launchpad!
}
type Launchpad {
id: Int
status: String
launches: [Launch]
}
...
# pozostałe typy danych
# enum, interface, union, scalar
# fragment
# input

Mutation
mutation UpdateLaunchpadStatus {
updateLaunchpadStatus {
id
status
}
}
mutation AddLaunchpad($input:
AddLaunchpadInput!) {
addLaunchpad(input: $input) {
id
status
}
}

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,
}

Apollo
● Apollo Client 12.3k ⭐
○ klient
○ oﬁcjalne (React, iOS)
○ nieoﬁcjalne (Vue, Svelte, Angular)
● Apollo Server 8.3k ⭐
○ Node.js GraphQl API
● Apollo Graph Manager
○ usługa chmurowa serwująca API GraphQL

Instalacja
● Apollo-boost
○ bazowa, rekomendowana konﬁguracja
Apollo client
● @apollo/react-hooks
○ API wykorzystujące React Hooks
● Graphql
○ Obsługa języka GraphQL

Konﬁguracja
Dla Apollo Boost
● Stworzenie instancji Apollo Client
● Przekazanie stworzonej instancji do
ApolloProvider

Apollo links
● Mały zbiór funkcjonalności kontrolujący
przepływ danych
○ link-state-error (customowa obsługa błędów)
○ apollo-link-context (autoryzacja)
○ apollo-link-state (zarządzanie lokalnym
stanem)

useQuery
const res = useQuery(GET_ROCKET, {
variables,
// CZY POMINĄĆ WYWOŁANIE
skip,
// ŹRÓDŁO DANYCH (cache, sieć, …)
fetchPolicy,
// CALLBACKS
onCompleted,
onError,
// POLLING (MS)
pollInterval,
});

const {
data,
loading,
error,
// PONOWNE WYWOŁANIE Z NOWYMI ARG
refetch,
// PAGINACJA
fetchMore,
// POLLING
startPolling,
stopPolling
...rest,
} = useQuery(GET_ROCKETS);
useQuery

Cache zapytań
● Automatyczny, znormalizowany cache
● obiekt => obiekt & { id, __typename }
● Zawsze albo nigdy __typename
● Update po mutacji
● dataIdFromObject
○ własne generowanie kluczy cache

Apollo Server
● Node.js
● Zgodny ze standardem GraphQL
● Podstawowe komponenty
○ typedefs (jakie dane możemy otrzymać)
○ resolvers (jak otrzymać te dane)

Apollo Server
import { ApolloServer } from “apollo-server”
const server = new ApolloServer({
typeDefs,
resolvers,
playground,
});
server.listen().then(({ url ) => {
console.log(`Server ready at ${url}`);
});

useMutation
const ADD_LAUNCHPAD = gql`
mutation AddLaunchpad($input: AddLaunchpadInput!) {
addLaunchpad(input: $input) {
id
status
}
}
}`;
const [addLaunchpad, response] = useMutation(
ADD_LAUNCHPAD,
{
// CALLBACK NP. DO AKTUALIZACJI CACHE
update,
// OPTYMISTYCZNE UI
optimisticResponse,
// PONOWNE POBRANIE WYBRANYCH ZAPYTAŃ
refetchQueries,
onCompleted,
onError,
}
);

Zarządzanie lokalnym
stanem aplikacji
● defaults
● resolvers
● zdeﬁniowanie mutacji w GraphQL
● zdeﬁniowanie query w GraphQL

Setup
import { withClientState } from ‘apollo-link-state’
const cache = new InMemoryCache(...)
const stateLink = withClientState({
cache,
resolvers: {
Mutation: {
updateStatus: (parent, args, { cache }) => {
const data = { … };
cache.writeData({ data });
return null;
}
}
}
})
const client = new ApolloClient({
cache,
link: ApolloLink.from([
stateLink,
new HttpLink({
uri: ‘http://backend.example/graphql’
})
])
})

Setup
z Apollo
Boost
import ApolloClient from ‘apollo-boost’
const client = new ApolloClient({
uri: ‘http://backend.example/graphql’,
resolvers: {
Muatation: {
updateStatus: (parent, args, {
cache }) => {
const data = { … };
cache.writeData({ data });
return null;
}
}
}
})

Bezpośredni
zapis do cache
import { ApolloConsumer } from
‘react-apollo’
<ApolloConsumer>
{cache => (
<button
onClick={() => cache.writeData({
data: { isOpen: true },
})}
>
Trigger
</button>
)}
</ApolloConsumer>

Resolver
dla mutacji
resolvers: {
Mutation: {
openDrawer: (parent, args, { cache }) => {
cache.writeData({
data: { isOpen: true },
});
return null;
}
}
}
gql`
mutation {
openDrawer: Boolean! @client
}
`
gql`
query {
isOpen @client
}
`

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

Tooling
● Generacja kodu
○ @graphql-codegen
● Edytor
○ Apollo GraphQL (VSC)
● Lintowanie
○ eslint-plugin-graphql
● Debugowanie
○ Apollo Client Developer Tools (Chrome)

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

Apollo Client 3.0
Zmiany w dependencies
● apollo-boost -> @apollo/client
● apollo-link-state -> @apollo/client
● @apollo/react-hooks -> @apollo/client

GraphQL w React z wykorzystaniem Apollo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie GraphQL w React z wykorzystaniem Apollo

Ähnlich wie GraphQL w React z wykorzystaniem Apollo (20)

Mehr von Boldare

Mehr von Boldare (9)

GraphQL w React z wykorzystaniem Apollo