Apollo

The graphQL platform that even covers the moon!

Italo "lin" lino

Musician
Open source enthusiast
Love education
Connecting people to justice.

Graphql

" GraphQL é uma linguagem de consulta. É considerada uma alternativa para arquiteturas REST, além de oferecer um serviço runtime para rodar comandos e consumir uma API.

Wikipédia

Graphql

Rest

interface Planet {
    id: string
    name: string,
    description: string
}

interface BaseApi<T> {
    getAll: () => Promise<[T]>
    getById: (id: string) => Promise<Planet>
}

class PlanetAPI implements BaseApi<Planet> {

    private API_URL = "https://somekindofendpoint.com/api/";

    public getAll = () => axios.get<Planet>(`${API_URL}/planets`);

    public getById = (id: string) => axios.get(`${API_URL}`/planet/${id});

}

about rest APIs

A lot of endpoints 🤯
More data than needed 💍
Version management ♻
Hight cost maintainment 💸

SO how GQL works?

Describe your data

type Planet {
  id: ID
  name: String
  description: String
}


type Query {
  getPlanets: [Planet]
}

Schema

Only what you need

query VemPlaneta{
  getPlanet(id: "someid") {
    name
  }
}

Response

{
  "planet": {
    "name": "Sanar"
  }
}

Query

Ways to fetch data

Query
Mutation
Subscription

Query

At its simplest, GraphQL is about asking for specific fields on objects

{
  planet {
    name
  }
}

{
  "data": {
    "planet": {
      "name": "some kind of planet"
    }
  }
}

Query

Response

MUtation

Just like in queries, if the mutation field returns an object type, you can ask for nested fields.

mutation AddPlanet($input: AddPlanetInput!){
  addPlanet(input: $input){
  	name
  }
}

{
  "data": {
    "planet": {
      "name": "some kind of planet"
    }
  }
}

Mutation

Response

Subscription

Real time data

subscription {
  lastPlanet
}

{
  "data": {
    "planet": {
      "name": "some kind of planet"
    }
  }
}

------------------------------------

{
  "data": {
    "planet": {
      "name": "another planet after update"
    }
  }
}

Mutação

Resposta

Apollo

Finally!

What it is?

"Apollo is a complete platform for implementing a graph over your data"

Apollo platform

Apollo PLATFORM

Players.

Apollo server

Features

Apollo Server

Universal compatibility.

Apollo Server

HUGE community.

Apollo Server

Built-in features.

Error handling
Pagination
Caching

Apollo Server

Live demostration.

Bifrost GraphQL

Apollo CLIent

Features

Apollo Client

Client for every one.

Apollo Client

Interoperability with other frameworks

Apollo Client

Declarative data fetching.

function Planets() {
  const { loading, error, data } = useQuery(GET_PLANETS);
  if (error) return <Error />;
  if (loading || !data) return <ActivityIndicator />;

  return <PlanetList planets={data.planets} />;
}

Apollo Client

Caching

"The InMemoryCache normalizes your data before saving it to the store by splitting the result into individual objects, creating a unique identifier for each object, and storing those objects in a flattened data structure"

Direct Cache Access
Read Query or Mutation
Write Query or Mutation
Updating the cache after a mutation

Apollo Client

Local state management @client.

{
  isAdmin
}

{
  isAdmin @client
}

Remote Root Query

Client Root Query

Apollo Client

Local state management @client.

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({ uri: 'http://localhost:4000' }),
  resolvers
});

Apollo client also works as an local Apollo Server with Resolvers!!!

Apollo Client

Local state management @client.

 query currentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId)
 }

Nested as well

query currentAuthorPostCount($authorId: Int!) {
    currentAuthor @client {
      name
      authorId @export(as: "authorId")
    }
    postCount(authorId: $authorId)
}

Apollo Client

Live demostration.

React Native App

In the last

but not the least

Apollo Engine

Features

Apollo Engine

Api manager.

Apollo Engine

Live Demonstration.

$ apollo service:push --endpoint=http://localhost:4000

That's all, thanks for coming!

Any questions?

Linzera