#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
  }
}

OU

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:

  1. Acessar o painel master
     
  2. Usuário: kazumi
     
  3. Senha: agesune1
     
  4. 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:

  1. Acessar o painel master
     
  2. Usuário: kazumi
     
  3. Senha: agesune1
     
  4. 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!

  1. Criar um novo projeto usando o CRA com o nome de usuario-dashboard
  2. Instalar o @bayon/commons
  3. Instalar o apollo-boost, apollo-link-context, react-apollo e graphql
  4. Remover os arquivos App.css, logo.svg e serviceWorker.js, bem como os códigos relacionados
  5. Criar o componente Dados.js que deverá listar id, nome, genero, documento, telefone, email e descrição do cargo (serão recebidos por props)
  6. 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!

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

#VemProReact

Obrigado!

#VemProReact #JEP #5

By Softplan Planejamento e Sistemas

Made with Slides.com

#VemProReact #JEP #5

GraphQL; Queries; Mutations; Apollo; JWT; Playground; Apollo Client

  • 520

More from Softplan Planejamento e Sistemas