GraphQL - Cliente Apollo
Usamos o Apollo Server para construir a especificação do graphql no lado do servidor. É rápido e fácil construir um servidor GraphQL pronto para produção. Agora vamos entender o lado do cliente.
O Cliente Apollo é a melhor maneira de usar o GraphQL para construir aplicativos cliente. O cliente foi projetado para ajudar o desenvolvedor a construir rapidamente uma IU que busca dados com GraphQL e pode ser usada com qualquer front-end JavaScript.
O cliente Apollo oferece suporte às seguintes plataformas -
| Sr. Não. | Plataforma e estrutura |
|---|---|
| 1 | Javascript React, Angular, Vue, Meteor, Ember |
| 2 | WebComponents Polímero, lit-apollo |
| 3 | Native Mobile Android nativo com Java, iOS nativo com Swift |
O cache é um dos principais recursos do Apollo Client. apollo-boost é um pacote de conveniência que traz um monte de outras dependências.
Ilustração
Vamos ver como usar o Apollo Client para construir aplicativos cliente usando as seguintes etapas -
Configurando o servidor
Temos que seguir as etapas abaixo para configurar um servidor -
Etapa 1 - Baixe e instale as dependências necessárias para o projeto
Crie uma pasta apollo-server-app. Mude seu diretório para apollo-server-app do terminal. Em seguida, siga as etapas 3 a 5 explicadas no capítulo Configuração do ambiente.
Etapa 2 - Criar um esquema
Adicionar schema.graphql arquivo na pasta do projeto apollo-server-app e adicione o seguinte código -
type Query
{
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
college:College
}
type College {
id:ID!
name:String
location:String
rating:Float
}Etapa 3 - Adicionar resolvedores
Crie um arquivo resolvers.js na pasta do projeto e adicione o seguinte código -
const db = require('./db')
const Query = {
//resolver function for students returns list
students:() => db.students.list(),
}
const Student = {
college:(root) => {
return db.colleges.get(root.collegeId);
}
}
module.exports = {Query,Student}Etapa 4 - Executar o aplicativo
Criar uma server.jsArquivo. Consulte a etapa 8 no capítulo Configuração de ambiente. Execute o comando npm start no terminal. O servidor estará instalado e funcionando na porta 9000. Aqui, usaremos GraphiQL como um cliente para testar o aplicativo.
Abra o navegador e digite o URL http://localhost:9000/graphiql. Digite a seguinte consulta no editor.
{
students{
id
firstName
college{
name
}
}
}A resposta para a consulta é a seguinte -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"college": {
"name": "CUSAT"
}
},
{
"id": "S1002",
"firstName": "Kannan",
"college": {
"name": "AMU"
}
},
{
"id": "S1003",
"firstName": "Kiran",
"college": {
"name": "AMU"
}
}
]
}
}Configurando o Cliente
Abra um novo terminal para o cliente. O terminal do servidor deve ser mantido em execução antes de executar o aplicativo cliente. O aplicativo React será executado na porta número 3000 e o aplicativo do servidor na porta número 9000.
Etapa 1 - Criar um aplicativo React
No terminal do cliente, digite o seguinte comando -
npx create-react-app hello-world-clientIsso instalará tudo o que é necessário para um aplicativo típico de reação. O utilitário npx e a ferramenta create-react-app criam um projeto com o nomehello-world-client. Assim que a instalação for concluída, abra o projeto no VSCode.
Etapa 2 - Iniciar o cliente hello-world
Altere o caminho da pasta atual no terminal para hello-world-client. Digite npm start para iniciar o projeto. Isso executará um servidor de desenvolvimento na porta 3000, abrirá automaticamente o navegador e carregará a página de índice.
Isso é mostrado na imagem abaixo -
Etapa 3 - Instale as bibliotecas cliente Apollo
Para instalar um cliente Apollo, abra um novo terminal e esteja no caminho da pasta do projeto atual. Digite o seguinte comando -
npm install apollo-boost graphqlIsso baixará as bibliotecas graphql para o lado do cliente e também o pacote Apollo Boost. Podemos verificar isso digitando npm view nas dependências apollo-boost. Isso terá muitas dependências, conforme mostrado abaixo -
{
'apollo-cache': '^1.1.15',
'apollo-cache-inmemory': '^1.2.8',
'apollo-client': '^2.4.0',
'apollo-link': '^1.0.6',
'apollo-link-error': '^1.0.3',
'apollo-link-http': '^1.3.1',
'apollo-link-state': '^0.4.0',
'graphql-tag': '^2.4.2'
}Podemos ver claramente que a biblioteca Apollo-Client está instalada.
Etapa 4 - Modificar o componente do aplicativo no arquivo index.js
Com o Apollo Client, podemos chamar diretamente o servidor sem o uso da API fetch. Além disso, as consultas e mutações não devem ser incorporadas em uma string feita com a notação de retrocesso. Isso ocorre porque, ogqlfunção analisa diretamente as consultas. Isso significa que um programador pode escrever consultas diretamente da mesma maneira ao escrever consultas na ferramenta GraphiQL. gql é uma função de tag que analisará a string de modelo escrita em notação de retrocesso no objeto de consulta graphql. O método de consulta do cliente Apollo retorna uma promessa.
O snippet de código a seguir mostra como importar o cliente Apollo -
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
link: new HttpLink({uri:endPointUrl}),
cache:new InMemoryCache()
});No capítulo anterior, discutimos como usar a API fetch para solicitações HTTP. O código a seguir mostra como usargqlfunção. oloadStudentsAsync A função usa o cliente graphql para consultar o servidor.
async function loadStudentsAsync() {
const query = gql`
{
students{
id
firstName
lastName
college{
name
}
}
}`
const {data} = await client.query({query}) ;
return data.students;
}Você só precisa manter o index.js dentro srcpasta e index.html na pasta pública; todos os outros arquivos gerados automaticamente podem ser removidos.
A estrutura do diretório é fornecida abaixo -
hello-world-client /
-->node_modules
-->public
index.html
-->src
index.js
-->package.jsonA seguir está o index.js na aplicação de reação -
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
// apollo client
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'
const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
link: new HttpLink({uri:endPointUrl}),
cache:new InMemoryCache()
});
async function loadStudentsAsync() {
const query = gql`
{
students{
id
firstName
lastName
college{
name
}
}
}
`
const {data} = await client.query({query}) ;
return data.students;
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
students:[]
}
this.studentTemplate = [];
}
async loadStudents() {
const studentData = await loadStudentsAsync();
this.setState({
students: studentData
})
console.log("loadStudents")
}
render() {
return(
<div>
<input type = "button" value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
<div>
<br/>
<hr/>
<table border = "3">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>college Name</td>
</tr>
</thead>
<tbody>
{
this.state.students.map(s => {
return (
<tr key = {s.id}>
<td>
{s.firstName}
</td>
<td>
{s.lastName}
</td>
<td>
{s.college.name}
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));O aplicativo react irá carregar os alunos do servidor GraphQL, assim que clicarmos no botão loadStudents conforme mostrado abaixo -
