GraphQL - configuração do ambiente

Neste capítulo, aprenderemos sobre a configuração ambiental do GraphQL. Para executar os exemplos neste tutorial, você precisará do seguinte -

• Um computador executando Linux, macOS ou Windows.

• Um navegador da web, de preferência a versão mais recente do Google Chrome.

• Uma versão recente do Node.js instalada. A versão LTS mais recente é recomendada.

• Código do Visual Studio com extensão GraphQL para VSCode instalado ou qualquer editor de código de sua escolha.

Como construir um servidor GraphQL com Nodejs

Faremos uma abordagem detalhada em etapas para construir o servidor GraphQL com Nodejs, conforme mostrado abaixo -

Etapa 1 - verificar as versões do nó e do Npm

Depois de instalar o NodeJs, verifique a versão do nó e do npm usando os seguintes comandos no terminal -

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

Etapa 2 - Criar uma pasta de projeto e abrir em VSCode

A pasta raiz do projeto pode ser nomeada como test-app.

Abra a pasta usando o editor de código do Visual Studio, seguindo as instruções abaixo -

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

Etapa 3 - Crie o package.json e instale as dependências

Crie um arquivo package.json que conterá todas as dependências do aplicativo de servidor GraphQL.

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

Instale as dependências usando o comando conforme fornecido abaixo -

C:\Users\Admin\test-app>npm install

Etapa 4 - Criar Banco de Dados de Arquivo Simples na Pasta de Dados

Nesta etapa, usamos arquivos simples para armazenar e recuperar dados. Crie uma pasta de dados e adicione dois arquivosstudents.json e colleges.json.

A seguir está o colleges.json arquivo -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

A seguir está o students.json arquivo -

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Etapa 5 - Criar uma camada de acesso a dados

Precisamos criar um armazenamento de dados que carregue o conteúdo da pasta de dados. Neste caso, precisamos de variáveis ​​de coleção, alunos e faculdades . Sempre que o aplicativo precisa de dados, ele faz uso dessas variáveis ​​de coleção.

Crie o arquivo db.js na pasta do projeto da seguinte maneira -

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

Etapa 6 - Criar arquivo de esquema, schema.graphql

Crie um arquivo de esquema na pasta do projeto atual e adicione o seguinte conteúdo -

type Query  {
   test: String
}

Etapa 7 - Criar Arquivo Resolver, resolvers.js

Crie um arquivo de resolução na pasta do projeto atual e adicione o seguinte conteúdo -

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

Etapa 8 - Criar Server.js e configurar GraphQL

Crie um arquivo de servidor e configure o GraphQL da seguinte maneira -

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

Etapa 9 - Executar o aplicativo e testar com GraphiQL

Verifique a estrutura da pasta do projeto test-app da seguinte forma -

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

Execute o comando npm start conforme fornecido abaixo -

C:\Users\Admin\test-app>npm start

O servidor está rodando na porta 9000, então podemos testar o aplicativo usando a ferramenta GraphiQL. Abra o navegador e digite o URL http: // localhost: 9000 / graphiql. Digite a seguinte consulta no editor -

{
   Test 
}

A resposta do servidor é fornecida abaixo -

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}