#VemProReact #JEP #5

#VemProReact

GraphQL

O que é?

#VemProReact

É uma "query language"
Tem tipos bem definidos e regras de obrigatoriedade
É implementado no Back-End
É usado no Front-End
Permite fazermos requisições para inclusão, consulta, atualização e exclusão de dados (CRUD)
No nosso ecossistema, podemos dizer que se resume a Queries e Mutations
Geralmente, funcionará sob o protocolo HTTP (POST)

GraphQL

Referências para estudos:

https://graphql.org/learn/

#VemProReact

Queries

Operação de consulta de dados
Podemos escolher as informações que vamos receber (fields)
Podemos especificar filtros para a consulta (arguments)
Podemos dar nomes personalizados aos campos (alias)

Como funcionam?

#VemProReact

Queries

(Na teoria)

#VemProReact

Queries

Considerando o service abaixo:

Query.usuario(
  filter: USR_usuario_get_by_id_filter
): USR_usuario_type

type USR_usuario_type {
  id: String!
  nome: String
  email: String
}

type USR_usuario_get_by_id_filter {
  id: String!
}

E os types abaixo:

* A "!" indica que o campo id é obrigatório e deve ser informado no filtro

* A "!" indica que o campo id é obrigatório no banco de dados (NOT NULL)

#VemProReact

Queries

Podemos fazer esta query:

{
  usuario {
    nome_do_usuario: nome
  }
}

query {
  usuario(filter: { id: "KAZUMI" }) {
    nome_do_usuario: nome
  }
}

E obter este resultado em JSON:

{
  "data": {
    "usuario": {
      "nome_do_usuario": "Kazumi Futatsugi (Softplan - SC)"
    }
  }
}

Operação de manipulação de dados
Devemos informar os dados que desejamos modificar (input)
Podemos escolher as informações que vamos receber (fields)
Podemos dar nomes personalizados aos campos (alias)

#VemProReact

Mutations

Como funcionam?

#VemProReact

Mutations

(Na teoria)

#VemProReact

Mutations

Considerando o service abaixo:

Mutation.update_usuario(
  input: USR_usuario_update_input_type_input!
): USR_usuario_type

type USR_usuario_update_input_type_input {
  id: String!
  nome: String!
  documento: String!
  genero: USR_e_genero_type!
}

** A "!" indica que os campos id, nome, documento e genero são obrigatório e deve ser informado no input

* A "!" indica que o input é obrigatório e deve ser informado na mutation

Podemos fazer esta mutation:

mutation {
  update_usuario(
    input: {
      id: "KAZUMI"
      nome: "Kazumi Futatsugi (Softplan - SC)"
      documento: "91784186660"
      genero: FEMININO
    }
  ) {
    id
    nome
    documento
  }
}

#VemProReact

Mutations

E obter este resultado em JSON:

{
  "data": {
    "update_usuario": {
      "id": "KAZUMI",
      "nome": "Kazumi Futatsugi (Softplan - SC)",
      "documento": "91784186660"
    }
  }
}

#VemProReact

Mutations

#VemProReact

Apollo Master SAJ6

O que é?

#VemProReact

Apollo Master SAJ6

Agregador de APIs GraphQL
Expõe todas as queries e mutations disponíveis (através do menu DOCS é possível listá-las)
Precisa de um token JWT* do usuário (Authorization**)
Precisa de uma lotação definida (lotacao***)
Precisamos informar algumas configurações nas requisições (HTTP HEADERS****)

#VemProReact

JWT

JSON Web Tokens
Padrão de autenticação na Web
Será enviado no cabeçalho das requisições
Header: Informações do token
Payload: Informações do usuário
Signature: Informações de segurança avançadas

Bearer SEVBREVS.UEFZTE9BRA==.U0lHTkFUVVJF

Exemplo:

#VemProReact

Authorization

{
  "Authorization": "Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJ3..."
}

Para conseguir um token válido:

Acessar o painel master
Usuário: kazumi
Senha: agesune1
Abrir o console e executar

copy(localStorage.token)

Será simplesmente "Bearer " seguido de um token JWT:

#VemProReact

lotacao

{
  "lotacao": 357
}

Para conseguir um id de lotação válido:

Acessar o painel master
Usuário: kazumi
Senha: agesune1
Abrir o console e executar

copy(localStorage.lotacao)

Será simplesmente o id da lotação do usuário:

#VemProReact

HTTP HEADERS

Será simplesmente um objeto contendo o Authorization e a lotacao do usuário:

{
  "Authorization": "Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJ3...",
  "lotacao": 357
}

Simples assim!

Como funcionam?

#VemProReact

Queries / Mutations

(Na prática)

#VemProReact

Playground

http://tj-master-pg.saj6.softplan.com.br/apollo

#VemProReact

Playground

#DicaDeOuro 🥇

O melhor amigo do Playground é o:

Como funciona?

#VemProReact

GraphQL

(No React)

#VemProReact

Apollo Client

É um pacote npm
É o mais recomendado para integrar GraphQL/React
Por hora, usaremos a versão 2.5

Referências para estudos:

https://www.apollographql.com/docs/react/v2.5

#VemProReact

Apollo Client

Referências para estudos:

https://www.apollographql.com/docs/react/v2.5/essentials/get-started/

Como utilizar?

#VemProReact

Apollo Client

Instalar os pacotes necessários:

yarn add apollo-boost apollo-link-context react-apollo graphql

Definir um contexto de execução das requisições:

import { setContext } from 'apollo-link-context';

const authLink = setContext((_, { headers }) => ({
  headers: {
    ...headers,
    lotacao: 357,
    authorization: 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJ3...'
  }
}));

#VemProReact

Apollo Client

Associar um endpoint:

import { createHttpLink } from 'apollo-link-http';

const httpLink = createHttpLink({
  uri: 'http://master.saj6.softplan.com.br/apollo'
});

Definir um objeto de cache:

import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache({
  addTypename: false
});

#VemProReact

Apollo Client

Criar e exportar o client com as configurações anteriores:

import { ApolloClient } from 'apollo-client';

const apolloClient = new ApolloClient({ 
  link: authLink.concat(httpLink),
  cache
});

export default apolloClient;

#VemProReact

Apollo Client

import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';

const authLink = setContext((_, { headers }) => ({
  headers: {
    ...headers,
    lotacao: 357,
    authorization: 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6IC...'
  }
}));

const httpLink = createHttpLink({
  uri: 'http://master.saj6.softplan.com.br/apollo'
});

const cache = new InMemoryCache({
  addTypename: false
});

const apolloClient = new ApolloClient({ 
  link: authLink.concat(httpLink),
  cache
});

export default apolloClient;

#VemProReact

Apollo Client

import { ApolloProvider } from 'react-apollo';
import apolloClient from './apolloClient';

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <App />
  </ApolloProvider>, 
  document.getElementById('root')
);

Adicionar o ApolloProvider informando o client criado como prop:

#VemProReact

Dúvidas?

#VemProReact

Atividade!

Dashboard Usuário

Não se preocupe com CSS, use o @bayon a seu favor
Vá de Grid , Typography e Input que vai dar boa!

#VemProReact

Atividade!

Criar um novo projeto usando o CRA com o nome de usuario-dashboard
Instalar o @bayon/commons
Instalar o apollo-boost, apollo-link-context, react-apollo e graphql
Remover os arquivos App.css, logo.svg e serviceWorker.js, bem como os códigos relacionados
Criar o componente Dados.js que deverá listar id, nome, genero, documento, telefone, email e descrição do cargo (serão recebidos por props)
Criar o componente LotacaoPrincipal.js que deverá listar o id do foro, a descrição do foro e o nome do munícipio (serão recebidos por prop)

#VemProReact

Atividade!

Remover o conteúdo do App.js e substituir por uma arrow function, já chamando os componentes criados
Implementar um apolloClient apontando para http://master.saj6.softplan.com.br/apollo
Adicionar o client criado ao index.js usando o ApolloProvider
Criar a(s) query(ies) necessária(s) para listar as informações do usuário (descritas anteriormente) em um arquivo queries.js
Chamar a(s) query(ies) criada(s) usando o componente Query
Repassar os dados recebidos para os componentes usando as props

#VemProReact

Obrigado!