Tu primer server GraphQL

https://goo.gl/YYXSjZ

Federico Marcos

marcosfede

marcosfede@gmail.com

≈ Físico

Data scientist @

Motivaciones

Cómo enviar solo la información que el cliente necesita
- Tamaño del Payload (ejemplo)
- mala señal o baja calidad de red
Cómo manejar información de recursos relacionados
- Duplicación de data / lógica
- Custom / integration endpoints
- No single roundtrip si necesitas más de un recurso
Coupling entre Front y Backend
- Diferentes teams

Lenguaje de consulta
Una especificacion con implementaciones en varios lenguajes
Open sourced por Facebook en 2015
Puede usarse con cualquier tipo de DB / sin DB
Habilidad de consultar exactamente lo que necesitas y nada mas
Obtener multiples recursos en un solo request
Desacoplar las necesidades del Front al backend

Que es GraphQL

SWAPI Example

REST: https://swapi.co/api/

GraphQL: https://swapiql.xyz/

Clientes de Frontend

State management (Casi) automatico
Declarative data fetching
Data normalization
Caching
Optimistic UI
Soporte para REST! apollo-link-rest

Server

```
Mucho Tooling
```
```
GraphQL Subscriptions!
```
```
TypeScript typings
```
```
GraphQL Playground
```
```
Buena doc
```
```
Muchos ejemplos
```
```
File upload
```

```
apollo-server-express
```
```
apollo-server-koa
```
```
apollo-server-hapi
```
```
apollo-server-lambda
```
```
apollo-server-azure-functions
```
```
apollo-server-cloud-functions
```
```
apollo-server-cloudflare
```


type Person{
    id: ID!
    birth_year: String!
    eye_color: String!
    films: [Film!]
    gender: String!
    hair_color: String!
    height: Float!
    homeworld: Planet
    mass: String!
    name: String!
    skin_color: String!
    created: DateTime!
    edited: DateTime!
    specie: Specie
    starships: [Starship!]
    vehicles: [Vehicle!]
}

type Query {
    person(personId: ID!): Person
    people(limit: Int, offset: Int): [Person!]!
}

type Mutation {
    renamePerson(personId: ID!, name: String!): Person
    deletePerson(personId: ID!): Person
}

type Subscription {
    personChange(personId: ID!): Person!
    newPeople: Person!
}

export const queries = {
  person: async (_, { id }) => getRepository(Person).findOneById(id),
  people: async (_, { limit }) => {
    const opts: any = {}
    if (limit) { opts.take = limit }
    return getRepository(Person).find(opts)
  },
}



export const fields = {
  homeworld: (person, params, { loaders }) => {
    if (!person.homeworldId) {
      return null
    }
    return loaders.planetLoader.load(person.homeworldId)
  },
}

query {
  people {
    homeworld {
      name
    }
  }
}

{
  "data": {
    "people": [
      {
        "homeworld": {
          "name": "Tatooine"
        }
      },
      {
        "homeworld": {
          "name": "Bespin"
        }
      },
     ...
    ]}
}

type Query {
    people: [Person!]!
}


type Person{
    ...
    homeworld: Planet
    ...
}

Batching

Caching

Propósito general

Algo repetitivo

No se encarga del ORM

Dynamically translates GraphQL to SQL for efficient, batched data retrieval before resolution

                          SELECT                               {
  user(id: 1) {               "user"."id",                         user: {
    idEncoded                 "user"."first_name",                   idEncoded: 'MQ==',
    fullName        ==>       "user"."last_name",        ==>         fullName: 'andrew carlson',
    email                     "user"."email_address"                 email: 'andrew@stem.is'
  }                         FROM "accounts" AS "user"              }
}                           WHERE "user"."id" = 1                }

No maneja el esquema

Buena performance

Object Mapping