GraphQL - Exemplo

Neste capítulo, criaremos uma API simples que retorna uma mensagem de saudação, HelloWorld, e a acessamos usando GraphiQL.

Exemplo

Este exemplo é baseado no servidor NodeJS, Express e Apollo. Vamos aprender a colocar todos os conceitos juntos nas seguintes etapas -

Etapa 1 - Configurando o Express

ExpressJS é uma estrutura de aplicativo da web que ajuda a construir sites e aplicativos da web. Neste exemplo, construiremos uma API GraphQL sobre a estrutura Express.

O próximo passo é criar uma pasta hello-world-servere navegue até a mesma pasta do terminal. Adicione package.json e dê um nome ao pacote. Como este pacote é usado apenas internamente, podemos declará-lo privado.

{
   "name":"hello-world-server",
   "private":true
}

Instale as dependências do servidor Express conforme mostrado abaixo -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser é um pacote de middleware que ajuda o Express a lidar com solicitações HTTP Post com eficiência. cors é outro pacote de middleware que lida com o compartilhamento de recursos de origem cruzada.

Criar uma server.js arquivo dentro da pasta do projeto e digite o seguinte nele -

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Para verificar se o servidor Express está instalado e funcionando, execute o seguinte código na janela do terminal -

C:\Users\Admin\hello-world-server>node server.js

A seguinte saída é exibida no console do servidor. Isso mostra que o servidor expresso está sendo executado na porta 9000.

server is up and running at 9000

Se você abrir o navegador e digitar http://localhost:9000, você obterá a seguinte tela -

Para parar o servidor, pressione Ctrl + C.

Etapa 2 - Instalar GraphQL e Apollo Server

Agora que o Express está configurado, a próxima etapa é fazer o download das seguintes dependências GraphQL -

graphql
graphql-tools
apollo-server-express@1

Devemos usar o servidor Apollo v1.0, pois é uma versão estável. Digite os seguintes comandos para instalar essas dependências -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

Podemos verificar se essas dependências foram instaladas com sucesso verificando o package.json arquivo que criamos anteriormente.

{
   "name": "hello-world-server",
   "private": true,
   
   "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"
   }
}

Etapa 3 - Definir o esquema

Um esquema GraphQL define que tipo de objeto pode ser obtido de um serviço e quais campos ele possui. O esquema pode ser definido usandoGraphQL Schema Definition Language. Agora, adicione o seguinte snippet de código noserver.js arquivo -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

Aqui, a consulta contém um atributo de saudação que retorna um valor de string .

Etapa 4 - Criar um resolvedor

A primeira etapa na criação de um resolvedor é adicionar algum código para processar a solicitação do campo de saudação. Isso é especificado em umresolver. A estrutura da função de resolução deve corresponder ao esquema. Adicione o seguinte snippet de código noserver.js Arquivo.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

A segunda etapa é vincular o esquema e o resolvedor usando makeExecutableSchema. Esta função é pré-definida no módulo graphql-tools. Adicione o seguinte snippet de código no server.js Arquivo.

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

Etapa 5 - Definir rotas para buscar dados do aplicativo ReactJS / GraphiQL

Adicione o seguinte snippet de código no server.js arquivo -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

A função graphqlExpress ajuda a registrar a rotahttp://localhost:9000/graphql. O aplicativo ReactJS pode usar este terminal para consultar dados. Da mesma forma, a função graphqliExpress ajuda a registrar a rotahttp://localhost:9000/graphiql. Isso será usado pelo cliente do navegador GraphiQL para testar a API.

O código server.js completo é fornecido abaixo -

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

Etapa 6 - Iniciar o aplicativo

Executar server.js usando Node.js da seguinte maneira -

C:\Users\Admin\hello-world-server>node server.js

Etapa 7 - Teste a API GraphQL

Abra o navegador e digite http://localhost:9000/graphiql. Na guia de consulta do GraphiQL, digite o seguinte -

{
   greeting
}

A resposta do servidor é fornecida abaixo -

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

A imagem a seguir ilustra a resposta -

Note - Certifique-se de que o Apollo Server versão 1.0 seja usado.