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