O que \u00e9 GraphQL?<\/h2>\n
A partir da documenta\u00e7\u00e3o oficial<\/a>: “GraphQL \u00e9 uma linguagem de consulta para APIs e um tempo de execu\u00e7\u00e3o para preencher essas consultas com seus dados existentes. GraphQL fornece uma descri\u00e7\u00e3o completa e compreens\u00edvel dos dados em sua API, d\u00e1 aos clientes o poder de pedir exatamente o que eles precisam e nada mais, facilita a evolu\u00e7\u00e3o das APIs ao longo do tempo e permite poderosas ferramentas de desenvolvimento”<\/p>\n GraphQL \u00e9 um tempo de execu\u00e7\u00e3o do lado do servidor para executar consultas usando o tipo de sistema que voc\u00ea definiu para seus dados. Al\u00e9m disso, o GraphQL n\u00e3o est\u00e1 ligado a nenhum banco de dados ou mecanismo de armazenamento espec\u00edfico. Ao inv\u00e9s disso, ele \u00e9 apoiado pelo seu c\u00f3digo e armazenamento de dados existentes. Voc\u00ea pode obter uma compara\u00e7\u00e3o detalhada dessas tecnologias com o guia GraphQL vs RESTful API<\/a>.<\/p>\n Para criar um servi\u00e7o GraphQL, voc\u00ea come\u00e7a definindo tipos de schemas e criando campos usando esses tipos. Em seguida, voc\u00ea fornece um resolvedor de fun\u00e7\u00e3o a ser executado em cada campo e digita sempre que os dados s\u00e3o solicitados pelo lado do cliente.<\/p>\n O sistema do tipo GraphQL \u00e9 usado para descrever quais dados podem ser consultados e quais dados voc\u00ea pode manipular. \u00c9 o n\u00facleo do GraphQL. Discutiremos diferentes maneiras de descrever e manipular os dados no GraphQ.<\/p>\n Os tipos de objetos GraphQL s\u00e3o modelos de dados contendo campos fortemente digitados. Deve haver um mapeamento de 1 para 1 entre seus modelos e os tipos de GraphQL. Abaixo est\u00e1 um exemplo de tipos de GraphQL:<\/p>\n GraphQL Query define todas as consultas que um cliente pode executar na API GraphQL. Voc\u00ea deve definir um Abaixo, definimos e mapeamos as consultas para a API RESTful correspondente:<\/p>\n Se as consultas do GraphQL s\u00e3o pedidos Colocaremos todas as muta\u00e7\u00f5es em um \u00fanico Voc\u00ea notou o uso de Um tipo de entrada pode ser definido como:<\/p>\n Os resolvers dizem ao GraphQL o que fazer quando cada consulta ou muta\u00e7\u00e3o \u00e9 solicitada. \u00c9 uma fun\u00e7\u00e3o b\u00e1sica que faz o trabalho duro de acertar a camada do banco de dados para fazer as opera\u00e7\u00f5es CRUD (criar, ler, atualizar, excluir), acertar um endpoint interno RESTful API, ou chamar um microsservi\u00e7o<\/a> para atender a solicita\u00e7\u00e3o do cliente.<\/p>\n Voc\u00ea pode criar um novo arquivo resolvers.js<\/strong> e adicionar o seguinte c\u00f3digo:<\/p>\n Um Schema GraphQL \u00e9 o que exp\u00f5e o GraphQL ao mundo. Portanto, tipos, consultas e muta\u00e7\u00f5es est\u00e3o contidos em schemas e expostos ao mundo.<\/p>\n Abaixo est\u00e1 como expor tipos, consultas e muta\u00e7\u00f5es para o mundo:<\/p>\n No script acima, inclu\u00edmos o GraphQL fornece uma implementa\u00e7\u00e3o para todas as principais linguagens de programa\u00e7\u00e3o, e o Node.js n\u00e3o est\u00e1 isento. No site oficial do GraphQL<\/a>, h\u00e1 uma se\u00e7\u00e3o para suporte ao JavaScript<\/a>, e tamb\u00e9m, h\u00e1 outras implementa\u00e7\u00f5es do GraphQL para tornar simples a escrita e a codifica\u00e7\u00e3o.<\/p>\n GraphQL Apollo fornece uma implementa\u00e7\u00e3o para Node.js e Express.js e facilita come\u00e7ar a usar o GraphQL.<\/p>\n Voc\u00ea aprender\u00e1 como criar e desenvolver seu primeiro aplicativo GraphQL no Node.js e Express.js<\/a> backend framework usando o GraphQL Apollo na pr\u00f3xima se\u00e7\u00e3o.<\/p>\n A constru\u00e7\u00e3o de um servidor GraphQL API com o Express.js \u00e9 simples para come\u00e7ar. Nesta se\u00e7\u00e3o, vamos explorar como construir um servidor GraphQL.<\/p>\n Primeiro, voc\u00ea precisa instalar e configurar um novo projeto Express.js. Crie uma pasta para o seu projeto e instale o Express.js usando este comando:<\/p>\n O comando acima cria um novo arquivo package.json<\/strong> e instala a biblioteca Express.js em seu projeto.<\/p>\n A seguir, estruturaremos nosso projeto como mostrado na imagem abaixo. Ele conter\u00e1 diferentes m\u00f3dulos para as funcionalidades do projeto, tais como usu\u00e1rios, todos, etc.<\/p>\n Vamos come\u00e7ar instalando as depend\u00eancias do GraphQL Express.js. Execute o seguinte comando para instalar:<\/p>\n A seguir, vamos criar um arquivo index.js<\/strong> na pasta de m\u00f3dulos e adicionar o seguinte snippet de c\u00f3digo:<\/p>\n Vamos rever o snippet de c\u00f3digo passo a passo:<\/p>\n Primeiro, importamos as bibliotecas necess\u00e1rias e criamos os tipos de consulta e muta\u00e7\u00e3o padr\u00e3o. A consulta e a muta\u00e7\u00e3o definiram apenas a vers\u00e3o da API GraphQL por enquanto. Entretanto, estendamos a consulta e a muta\u00e7\u00e3o para incluir outros schemas conforme prosseguimos.<\/p>\n Criamos um novo tipo de escalar por tempo e nosso primeiro resolvedor para a consulta e muta\u00e7\u00e3o criada acima. Al\u00e9m disso, tamb\u00e9m geramos um schema usando a fun\u00e7\u00e3o O schema gerado incluir\u00e1 todos os outros schemas que voc\u00ea importou e ainda mais ap\u00f3s cri\u00e1-los e import\u00e1-los.<\/p>\n O snippet de c\u00f3digo acima mostra que importamos diferentes schemas para a fun\u00e7\u00e3o makeExecutableSchema. Esta abordagem nos ajuda na estrutura\u00e7\u00e3o do aplicativo por complexidade. Em seguida, criaremos os schemas Todo e Usu\u00e1rio que importamos.<\/p>\n O Schema Todo mostra opera\u00e7\u00f5es simples de CRUD que os usu\u00e1rios do aplicativo podem realizar. Abaixo est\u00e1 o schema que implementa a opera\u00e7\u00e3o de Todo CRUD.<\/p>\n Vamos rever o snippet de c\u00f3digo passo a passo:<\/p>\n Primeiro, criamos um Schema Todo usando GraphQL Em seguida, criamos um resolvedor, usado para recuperar os dados corretos quando uma determinada consulta ou muta\u00e7\u00e3o \u00e9 chamada.<\/p>\n Com a fun\u00e7\u00e3o resolver implementada, podemos criar m\u00e9todos individuais para a l\u00f3gica de neg\u00f3cios e manipula\u00e7\u00e3o do banco de dados, como mostrado no exemplo do create-todo.js<\/strong>.<\/p>\n Crie um arquivo create-user.js<\/strong> na pasta O snippet de c\u00f3digo acima \u00e9 uma forma simplificada de criar um novo Todo em nosso banco de dados usando o ORM Sequelize. Voc\u00ea pode aprender mais sobre o Sequelize e como configur\u00e1-lo com o Node.js<\/a>.<\/p>\n Voc\u00ea pode seguir o mesmo passo para criar muitos schemas dependendo do seu aplicativo ou voc\u00ea pode clonar o projeto completo do GitHub<\/a>.<\/p>\n Em seguida, configuraremos o servidor com o Express.js e executar o aplicativo Todo rec\u00e9m-criada com GraphQL e Node.js.<\/p>\nTerminologia do GraphQL<\/h2>\n
Tipos de objetos<\/h3>\n
type User {\n id: ID! # The \"!\" means required\n firstname: String\n lastname: String\n email: String\n username: String\n todos: [Todo] # Todo is another GraphQL type\n}<\/code><\/pre>\nQuery<\/h3>\n
RootQuery<\/code> que conter\u00e1 todas as consultas existentes por conven\u00e7\u00e3o.<\/p>\ntype RootQuery {\n user(id: ID): User # Corresponds to GET \/api\/users\/:id\n users: [User] # Corresponds to GET \/api\/users\n todo(id: ID!): Todo # Corresponds to GET \/api\/todos\/:id\n todos: [Todo] # Corresponds to GET \/api\/todos\n}<\/code><\/pre>\nMuta\u00e7\u00f5es<\/h3>\n
GET<\/code>, as muta\u00e7\u00f5es s\u00e3o POST<\/code>, PUT<\/code>, PATCH<\/code>, e DELETE<\/code> pedidos que manipulam a API do GraphQL.<\/p>\nRootMutation<\/code> para demonstrar:<\/p>\ntype RootMutation {\n createUser(input: UserInput!): User # Corresponds to POST \/api\/users\n updateUser(id: ID!, input: UserInput!): User # Corresponds to PATCH \/api\/users\n removeUser(id: ID!): User # Corresponds to DELETE \/api\/users\n createTodo(input: TodoInput!): Todo\n updateTodo(id: ID!, input: TodoInput!): Todo\n removeTodo(id: ID!): Todo\n}<\/code><\/pre>\n-input<\/code> tipos para as muta\u00e7\u00f5es como UserInput<\/code>, TodoInput<\/code>. \u00c9 sempre a melhor pr\u00e1tica definir sempre os tipos de entrada para criar e atualizar seus recursos.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nResolvers<\/h3>\n
import sequelize from '..\/models';\nexport default function resolvers () {\n const models = sequelize.models;\n return {\n \/\/ Resolvers for Queries\n RootQuery: {\n user (root, { id }, context) {\n return models.User.findById(id, context);\n },\n users (root, args, context) {\n return models.User.findAll({}, context);\n }\n },\n User: {\n todos (user) {\n return user.getTodos();\n }\n },\n }\n \/\/ Resolvers for Mutations\n RootMutation: {\n createUser (root, { input }, context) {\n return models.User.create(input, context); \n },\n updateUser (root, { id, input }, context) {\n return models.User.update(input, { ...context, where: { id } });\n },\n removeUser (root, { id }, context) {\n return models.User.destroy(input, { ...context, where: { id } });\n },\n \/\/ ... Resolvers for Todos go here\n }\n}<\/code><\/pre>\nSchema<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> e RootMutation<\/code> que criamos anteriormente para ser exposto ao mundo.<\/p>\nComo o GraphQL funciona com o Node.js e Express.js?<\/h2>\n
Configurando o GraphQL com o Express.js<\/h2>\n
Inicialize o projeto com o Express.js<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Arquivos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Inicialize o GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nCriando schemas e Types<\/h3>\n
const { gql } = require('apollo-server-express');\nconst users = require('.\/users');\nconst todos = require('.\/todos');\nconst { GraphQLScalarType } = require('graphql');\nconst { makeExecutableSchema } = require('@graphql-tools\/schema');\nconst typeDefs = gql`\n scalar Time\n type Query {\n getVersion: String!\n }\n type Mutation {\n version: String!\n }\n`;\nconst timeScalar = new GraphQLScalarType({\n name: 'Time',\n description: 'Time custom scalar type',\n serialize: (value) => value,\n});\nconst resolvers = {\n Time: timeScalar,\n Query: {\n getVersion: () => `v1`,\n },\n};\nconst schema = makeExecutableSchema({\n typeDefs: [typeDefs, users.typeDefs, todos.typeDefs],\n resolvers: [resolvers, users.resolvers, todos.resolvers],\n});\nmodule.exports = schema;<\/code><\/pre>\nAn\u00e1lise do c\u00f3digo<\/h4>\n
Passo 1<\/h5>\n
![\"Importa\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Passo 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Criando o schema Todo<\/h3>\n
const { gql } = require('apollo-server-express');\nconst createTodo = require('.\/mutations\/create-todo');\nconst updateTodo = require('.\/mutations\/update-todo');\nconst removeTodo = require('.\/mutations\/delete-todo');\nconst todo = require('.\/queries\/todo');\nconst todos = require('.\/queries\/todos');\nconst typeDefs = gql`\n type Todo {\n id: ID!\n title: String\n description: String\n user: User\n }\n input CreateTodoInput {\n title: String!\n description: String\n isCompleted: Boolean\n }\n input UpdateTodoInput {\n title: String\n description: String\n isCompleted: Boolean\n } extend type Query {\n todo(id: ID): Todo!\n todos: [Todo!]\n }\n extend type Mutation {\n createTodo(input: CreateTodoInput!): Todo\n updateTodo(id: ID!, input: UpdateTodoInput!): Todo\n removeTodo(id: ID!): Todo\n }\n`;\n\/\/ Provide resolver functions for your schema fields\nconst resolvers = {\n \/\/ Resolvers for Queries\n Query: {\n todo,\n todos,\n },\n \/\/ Resolvers for Mutations\n Mutation: {\n createTodo,\n updateTodo,\n removeTodo,\n },\n};\nmodule.exports = { typeDefs, resolvers };<\/code><\/pre>\nAn\u00e1lise do c\u00f3digo<\/h4>\n
Passo 1:<\/h5>\n
type<\/code>, input<\/code>, e extend<\/code>. A palavra-chave extend<\/code> \u00e9 usada para herdar e adicionar novas consultas e muta\u00e7\u00f5es \u00e0 consulta raiz existente e \u00e0 muta\u00e7\u00e3o que criamos acima.<\/p>\n![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Passo 2:<\/h5>\n
![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations\/<\/code> e adicione a l\u00f3gica do neg\u00f3cio para criar um novo Todo em seu banco de dados.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nConfigurando e executando o servidor<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")