Frontend Developer in:

Przemek Fałowski

Who am I?

@przemkow

@przemkow

przemyslaw.falowski

REST?

Movies

/movies

Directors

/directors/:id

Actors

/actors/:id

Solution?

Query params!

/movies?include=

directors,

actors

👏

GraphQL

What is GraphQL?

• A query language for API
• Schema definition language 
• Release as a specification

What isn't?

• Not a Database or ORM
• Not a language specific tool

CRUD

GraphQL

GET /posts

POST /posts

DELETE /posts/:id

PATCH /posts/:id

...

 

HTTP status codes:

- 200 Success

- 403 Forbidden

...

POST /graphql

200 Success

Query

Response

Apollo GraphQL

 

What is Apollo GraphQL?

Set of libraries which implement both a GraphQL server and client

Apollo Server

Schema

Resolver

Apollo Client

How to start?

1. Install react-apollo

2. Setup apollo client

3. Connect to your react app

So is only about a different way to fetch data from API?

🤔

JSON

Database

Apollo Cache

• Same path, same object

• Same identifier, same object

Apollo client is a declarative approach to data fetching 

Redux

• Component needs data

• Dispatch Action

• API Call
• Parse response
• Update Store
• Send data to the component

Apollo

• Component needs data

• Write Query with required data

fetchPolicy:

• cache-first (default)
• cache-and-network
• network-only
• cache-only
• no-cache​

HTTP batching

Batch multiple operations into a single HTTP request

Example: http-batching  branch

Optimistic UI

Example: optimistic-ui  branch

Developer Experience

Developer Experience

Support:
swift | typescript | flow | scala

Example: apollo-tooling

With a great tool...

Problem:

Solution: