Consumindo GraphQL + gerenciando estado
utilizando Apollo

Marina Limeira

Engenheira de Software @ Nubank

disclaimer

Baseado na experiência com React Native

Tentarei abstrair o máximo que eu puder :)

micro-serviços 💜

micro-serviços 💔

Backend for front-end (bff)

Backend for front-end (bff)

Abrams (Shuffle - backoffice)

Shore (Shell - novo app)

Stormshield (Ghostflame - Nuconta)

GraphQL

Query language para APIs

Alternativa ao REST

Schema funciona como um contrato entre o cliente o servidor

GraphQL

            
type Item {
  name: String!
  price: Int!
  quantity: Int
}

type Storage {
  items: [Item]
}
            
          

GraphQL

Agnóstico a linguagem, tanto pra cliente quanto pra servidor

GraphQL

Cliente

Servidor

poke-mart

github.com/marinalimeira/poke-mart

github.com/marinalimeira/poke-mart-server

Queries

Equivalente ao GET do REST

Queries

            
query {
  items {
    name
    price
  }
}
            
          

Queries

            
{
  "data": {
    "items": [
     {
        "name": "Poké Ball",
        "price": "200"
      }, 
      {
        "name": "Super Potion",
        "price": "200"
      }
    ]
  }
}
              
          

Error Handling

Status code normalmente é 200 ou 400

Informações sobre o erro estarão no corpo da resposta

Error Handling

Status 4xx ou 5xx

e.g. PIN - 403

Error Handling

Padrão é: não tem padrão 😢

Error Handling

            
{
  "data": {
    "items": null,
  },
  "errors": [
    {
      "message": "Unauthorized",
      "status": "401",
    }
  ]
}
              
          

Mutation

Equivalente a POST - PUT - PATCH - DELETE do REST

Mutation

            
mutation {
  buyItem(input: { name: 'Poké Ball', quantity: 10}) {
    success
  }
}
              
          

Apollo

Apollo

Cliente

Servidor

apollo-client

Total de ~7kk no NPM

Apollo

Optimistic UI

Simula a resposta do servidor antes de completar o request

Optimistic UI

            
mutate({ 
  variables: { name: evt.target.value },
  optimisticResponse: {
     addChannel: {
       name: evt.target.value,
       id: Math.round(Math.random() * -1000000),
       __typename: 'Channel',
     },
   },
   update: ...
})
            
          

apollo-link-state

Mesma finalidade do Redux ➡ estado global

É possível utilizar mesma query para dados locais e do servidor

Single source of truth

apollo-link-state

apollo-link-state

            
query {
  items {
    name
    price
    quantity
  }
  shopping @client {
    quantity
  }
}
            
          

apollo-link-state

            
const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      updateShoppingCart: (_, { items }, { cache }) => {
        const data = {
          shoppingCart: { __typename: 'ShoppingCart', items },
        };
        cache.writeData({ data });
        return null
      },
    },
  }
  });
            
          

apollo-link-state

Se não estivéssemos utilizando GraphQL, não utilizaríamos
o apollo-link-state.

Obrigada!

sou.nu/vagasnu