Iara  Simões

Iara Simões

1658290800

Cómo crear un servidor API GraphQL usando Express JS en Node JS

En este tutorial, creará un servidor Express API en Node.js que sirve un punto final de GraphQL. También creará un esquema GraphQL basado en el sistema de tipos GraphQL, incluidas operaciones, como consultas y mutaciones, y funciones de resolución para generar respuestas para cualquier solicitud.

Configuración de un servidor HTTP Express

El primer paso es configurar un servidor Express, lo que puede hacer antes de escribir cualquier código GraphQL.

En un nuevo proyecto, instalarás expressy corscon el npm installcomando:

npm install express cors

Express será el marco para su servidor. Es un marco de aplicación web para Node.js diseñado para crear API. El paquete CORS , que es un middleware de intercambio de recursos de origen cruzado, le permitirá acceder fácilmente a este servidor desde un navegador.

También puede instalar Nodemon como una dependencia de desarrollo:

npm install -D nodemon

Nodemon es una herramienta que ayuda a desarrollar aplicaciones basadas en nodos al reiniciar automáticamente la aplicación cuando se detectan cambios en los archivos del directorio.

La instalación de estos paquetes se habrá creado node_modulesy package.jsoncon dos dependencias y una dependencia de desarrollo en la lista.

Usando nanoo su editor de texto favorito, abra package.jsonpara editar, que se verá así:

{
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Hay algunos campos más que agregará en este punto. Para package.json, realice los siguientes cambios resaltados:

{
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "type": "module"
}

Creará un archivo para el servidor en server.js, por lo que mainapunta a server.js. Esto asegurará que se npm startinicie el servidor.

Para facilitar el desarrollo en el servidor, también crea un script llamado "dev"que se ejecutará nodemon server.js.

Finalmente, agrega un typeof modulepara asegurarse de que puede usar importdeclaraciones en todo el código en lugar de usar el CommonJS predeterminado require.

Guarde y cierre el archivo cuando haya terminado.

A continuación, cree un archivo llamado server.js. En él, creará un servidor Express simple, escuchará en el puerto 4000y enviará una solicitud que diga Hello, GraphQL!. Para configurar esto, agregue las siguientes líneas a su nuevo archivo:

import express from 'express'
import cors from 'cors'

const app = express()
const port = 4000

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get('/', (request, response) => {
  response.send('Hello, GraphQL!')
})

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Este bloque de código crea un servidor HTTP básico con Express. Al invocar la expressfunción, crea una aplicación Express. Después de configurar algunas configuraciones esenciales para CORS y JSON, definirá qué debe enviarse con una GETsolicitud a la raíz ( /) usando app.get('/'). Finalmente, use app.listen()para definir el puerto en el que el servidor API debería estar escuchando.

Guarde y cierre el archivo cuando haya terminado.

Ahora puede ejecutar el comando para iniciar el servidor Node:

npm run dev

Si visita http://localhost:4000en un navegador o ejecuta un curl http://localhost:4000comando, verá que regresa Hello, GraphQL!, lo que indica que el servidor Express se está ejecutando. En este punto, puede comenzar a agregar código para servir un punto final de GraphQL.

Configuración del middleware del servidor HTTP de GraphQL

En esta sección, comenzará a integrar el esquema GraphQL en el servidor Express básico. Lo hará definiendo un esquema, resoluciones y conectándose a un almacén de datos.

Para comenzar a integrar GraphQL en el servidor Express, instalará tres paquetes: graphql, express-graphqly @graphql-tools/schema. Ejecute el siguiente comando:

npm install graphql@14 express-graphql @graphql-tools/schema
  • graphql: la implementación de referencia de JavaScript para GraphQL.
  • express-graphql: middleware de servidor HTTP para GraphQL.
  • @graphql-tools/schema: un conjunto de utilidades para un desarrollo GraphQL más rápido.

Puede importar estos paquetes en el server.jsarchivo agregando las líneas resaltadas:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

...

El siguiente paso es crear un esquema GraphQL ejecutable.

Para evitar la sobrecarga de configurar una base de datos, puede usar un almacén en memoria para los datos que consultará el servidor GraphQL. Puede crear un dataobjeto con los valores que tendría su base de datos. Agregue las líneas resaltadas a su archivo:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

...

La estructura de datos aquí representa una tabla de base de datos llamada warriorsque tiene dos filas, representadas por las entradas Jaimey .Jorah

Con sus paquetes instalados y algunos datos en su lugar, ahora creará un esquema, que define la API describiendo los datos disponibles para ser consultados.

Esquema GraphQL

Ahora que tiene algunos datos básicos, puede comenzar a crear un esquema rudimentario para una API para obtener la cantidad mínima de código necesaria para comenzar a usar un punto final de GraphQL. Este esquema pretende replicar algo que podría usarse para un juego de rol de fantasía, en el que hay personajes que tienen roles como guerreros, magos y curanderos. Este ejemplo está destinado a ser abierto para que pueda agregar tanto o tan poco como desee, como hechizos y armas.

Un esquema GraphQL se basa en un sistema de tipos . Hay algunos tipos incorporados y también puede crear su propio tipo. Para este ejemplo, creará un nuevo typellamado Warriory le asignará dos campos: idy name.

type Warrior {
  id: ID!
  name: String!
}

El idtiene un IDtipo, y el nametiene un Stringtipo. Ambos son escalares integrados o tipos primitivos. El signo de exclamación ( !) significa que el campo no admite valores NULL y se requerirá un valor para cualquier instancia de este tipo.

La única información adicional que necesita para comenzar es un Querytipo base, que es el punto de entrada a la consulta de GraphQL. Lo definiremos warriorscomo una matriz de Warriortipos.

type Query {
  warriors: [Warrior]
}

Con estos dos tipos, tiene un esquema válido que se puede usar en el middleware HTTP de GraphQL. En última instancia, el esquema que defina aquí se pasará a la makeExecutableSchemafunción proporcionada por graphql-toolsas typeDefs. Las dos propiedades pasadas a un objeto en la makeExecutableSchemafunción serán las siguientes:

  • typeDefs: una cadena de lenguaje de esquema GraphQL.
  • resolvers: funciones que son llamadas para ejecutar un campo y producir un valor.

En server.js, después de importar las dependencias, cree una typeDefsvariable y asigne el esquema de GraphQL como una cadena, como se muestra aquí:

...

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

...

Ahora tiene definido su conjunto de datos y su esquema, como datay typeDefs, respectivamente. A continuación, creará resolutores para que la API sepa qué hacer con las solicitudes entrantes.

Funciones de resolución de GraphQL

Los solucionadores son una colección de funciones que generan una respuesta para el servidor GraphQL. Cada función de resolución tiene cuatro parámetros:

  • obj: El objeto principal, que no es necesario utilizar aquí porque ya es el objeto raíz o de nivel superior.
  • args: Cualquier argumento de GraphQL proporcionado al campo.
  • context: Estado compartido entre todos los resolutores, a menudo una conexión de base de datos.
  • info: Información adicional .

En este caso, creará una resolución para el Querytipo raíz y devolverá un valor para warriors.

Para comenzar con este servidor de ejemplo, pase el almacén de datos en memoria anterior en esta sección agregando las líneas resaltadas a server.js:

...

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

...

El punto de entrada al servidor GraphQL será a través del Querytipo raíz en los resolutores. Ahora ha agregado una función de resolución, llamada warriors, que regresará warriorsdesde context. contextes donde se incluirá el punto de entrada de la base de datos y, para esta implementación específica, será la datavariable que contenga el almacén de datos en memoria.

Cada función de resolución individual tiene cuatro parámetros: obj, args, contexty info. El parámetro más útil y relevante para nuestro esquema en este momento es context, que es un objeto compartido por los resolutores. A menudo se utiliza como conexión entre el servidor GraphQL y una base de datos.

Finalmente, con el conjunto typeDefsy resolverstodo, tiene suficiente información para crear un esquema ejecutable. Agregue las líneas resaltadas a su archivo:

...

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

...

La función makeExecutableSchema crea un esquema completo que puede pasar al punto final de GraphQL.

Ahora reemplace el punto final raíz predeterminado que actualmente regresa Hello, GraphQL!con el siguiente /graphqlpunto final agregando las líneas resaltadas:

...

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

...

La convención es que un servidor GraphQL utilizará el /graphqlpunto final. El uso del graphqlHTTPmiddleware requiere pasar el esquema y un contexto, que en este caso, es su almacén de datos simulado.

Ahora tiene todo lo necesario para comenzar a servir el endpoint. Su server.jscódigo debería verse así:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const app = express()
const port = 4000

// In-memory data store
const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

// Schema
const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

// Resolver for warriors
const resolvers = {
  Query: {
    warriors: (obj, args, context) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Entrypoint
app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Guarde y cierre el archivo cuando haya terminado.

Ahora debería poder ir http://localhost:4000/graphqly explorar su esquema utilizando GraphiQL IDE .

Su API de GraphQL ahora está completa según el esquema y los solucionadores que creó en esta sección. En la siguiente sección, usará GraphiQL IDE para ayudarlo a depurar y comprender su esquema.

Uso del IDE de GraphiQL

Dado que aplicó la graphiqlopción trueal middleware GraphQL, tiene acceso al entorno de desarrollo integrado (IDE) de GraphiQL. Si visitó el punto final de GraphQL en una ventana del navegador, se encontrará en GraphiQL.

GraphiQL es una herramienta en el navegador para escribir, validar y probar consultas de GraphQL. Ahora puede probar su servidor GraphQL para asegurarse de que está devolviendo los datos correctos.

Realice una consulta para warriors, solicitando las propiedades idy name. En su navegador, agregue las siguientes líneas al panel izquierdo de GraphiQL:

{
  warriors {
    id
    name
  }
}

Envíe la consulta presionando la flecha Reproducir en la parte superior izquierda y debería ver el valor de retorno en JSON en el lado derecho:

Output{
  "data": {
    "warriors": [
      { "id": "001", "name": "Jaime" },
      { "id": "002", "name": "Jorah" }
    ]
  }
}

Si elimina uno de los campos de la consulta, verá que el valor de retorno cambia en consecuencia. Por ejemplo, si solo desea recuperar el namecampo, puede escribir la consulta de esta manera:

{
  warriors {
    name
  }
}

Y ahora tu respuesta se verá así:

Output{
  "data": {
    "warriors": [{ "name": "Jaime" }, { "name": "Jorah" }]
  }
}

La capacidad de consultar solo los campos que necesita es uno de los aspectos poderosos de GraphQL y es lo que lo convierte en un lenguaje orientado al cliente .

De vuelta en GraphiQL, si hace clic en Documentos completamente a la derecha, se expandirá una barra lateral etiquetada Explorador de documentación . Desde esa barra lateral, puede hacer clic en la documentación para ver su esquema con más detalle.

Ahora su API está completa y ha explorado cómo usarla desde GraphiQL. El siguiente paso será realizar solicitudes reales de un cliente a su API de GraphQL.

Consultar la API de GraphQL desde un cliente

Al igual que con las API REST , un cliente puede comunicarse con una API GraphQL realizando solicitudes HTTP a través de la red. Dado que puede usar las API integradas del navegador fetchpara realizar solicitudes de red, también puede usarlas fetchpara consultar GraphQL.

Para un ejemplo muy básico, cree un esqueleto HTML en un index.htmlarchivo con una <pre>etiqueta:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL Client</title>
  </head>

  <pre><!-- data will be displayed here --></pre>

  <body>
    <script>
      // Add query here
    </script>
  </body>
</html>

En la scriptetiqueta, crea una función asíncrona que envíe una POSTsolicitud a la API de GraphQL:

...
<body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()
				
        // Append data to the pre tag
        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
...

El Content-Typeencabezado debe establecerse en application/jsony la consulta debe pasarse en el cuerpo como una cadena. El script llamará a la función para realizar la solicitud y establecerá la respuesta en la preetiqueta.

Aquí está el index.htmlcódigo completo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL</title>
  </head>

  <pre></pre>

  <body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()

        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
</html>

Guarde y cierre el archivo cuando haya terminado.

Ahora, cuando vea el index.htmlarchivo en un navegador, verá una solicitud de red saliente al http://localhost:4000/graphqlpunto final, que devolverá un correo electrónico 200con los datos. Puede ver esta solicitud de red abriendo Herramientas para desarrolladores y navegando a la pestaña Red .

Si su solicitud se procesó y obtuvo una 200respuesta con los datos de la API de GraphQL, ¡felicidades! Hiciste tu primer servidor API GraphQL.

Conclusión

En este tutorial, creó un servidor API GraphQL utilizando el marco Express en Node.js. El servidor GraphQL consta de un único /graphqlpunto final que puede gestionar las solicitudes entrantes para consultar el almacén de datos. Su API tenía un esquema con el Querytipo base, un Warriortipo personalizado y una resolución para obtener los datos adecuados para esos tipos.

Con suerte, este artículo ayudó a desmitificar GraphQL y abre nuevas ideas y posibilidades de lo que se puede lograr con GraphQL. Existen muchas herramientas que pueden ayudar con los aspectos más complejos del trabajo con GraphQL, como la autenticación, la seguridad y el almacenamiento en caché, pero aprender a configurar un servidor API de la manera más sencilla posible debería ayudarlo a comprender los aspectos esenciales de GraphQL.

Fuente del artículo original en https://www.digitalocean.com

#graphql #api #express #expressjs #nodo #nodejs 

What is GEEK

Buddha Community

Cómo crear un servidor API GraphQL usando Express JS en Node JS

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Iara  Simões

Iara Simões

1658290800

Cómo crear un servidor API GraphQL usando Express JS en Node JS

En este tutorial, creará un servidor Express API en Node.js que sirve un punto final de GraphQL. También creará un esquema GraphQL basado en el sistema de tipos GraphQL, incluidas operaciones, como consultas y mutaciones, y funciones de resolución para generar respuestas para cualquier solicitud.

Configuración de un servidor HTTP Express

El primer paso es configurar un servidor Express, lo que puede hacer antes de escribir cualquier código GraphQL.

En un nuevo proyecto, instalarás expressy corscon el npm installcomando:

npm install express cors

Express será el marco para su servidor. Es un marco de aplicación web para Node.js diseñado para crear API. El paquete CORS , que es un middleware de intercambio de recursos de origen cruzado, le permitirá acceder fácilmente a este servidor desde un navegador.

También puede instalar Nodemon como una dependencia de desarrollo:

npm install -D nodemon

Nodemon es una herramienta que ayuda a desarrollar aplicaciones basadas en nodos al reiniciar automáticamente la aplicación cuando se detectan cambios en los archivos del directorio.

La instalación de estos paquetes se habrá creado node_modulesy package.jsoncon dos dependencias y una dependencia de desarrollo en la lista.

Usando nanoo su editor de texto favorito, abra package.jsonpara editar, que se verá así:

{
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Hay algunos campos más que agregará en este punto. Para package.json, realice los siguientes cambios resaltados:

{
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "type": "module"
}

Creará un archivo para el servidor en server.js, por lo que mainapunta a server.js. Esto asegurará que se npm startinicie el servidor.

Para facilitar el desarrollo en el servidor, también crea un script llamado "dev"que se ejecutará nodemon server.js.

Finalmente, agrega un typeof modulepara asegurarse de que puede usar importdeclaraciones en todo el código en lugar de usar el CommonJS predeterminado require.

Guarde y cierre el archivo cuando haya terminado.

A continuación, cree un archivo llamado server.js. En él, creará un servidor Express simple, escuchará en el puerto 4000y enviará una solicitud que diga Hello, GraphQL!. Para configurar esto, agregue las siguientes líneas a su nuevo archivo:

import express from 'express'
import cors from 'cors'

const app = express()
const port = 4000

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get('/', (request, response) => {
  response.send('Hello, GraphQL!')
})

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Este bloque de código crea un servidor HTTP básico con Express. Al invocar la expressfunción, crea una aplicación Express. Después de configurar algunas configuraciones esenciales para CORS y JSON, definirá qué debe enviarse con una GETsolicitud a la raíz ( /) usando app.get('/'). Finalmente, use app.listen()para definir el puerto en el que el servidor API debería estar escuchando.

Guarde y cierre el archivo cuando haya terminado.

Ahora puede ejecutar el comando para iniciar el servidor Node:

npm run dev

Si visita http://localhost:4000en un navegador o ejecuta un curl http://localhost:4000comando, verá que regresa Hello, GraphQL!, lo que indica que el servidor Express se está ejecutando. En este punto, puede comenzar a agregar código para servir un punto final de GraphQL.

Configuración del middleware del servidor HTTP de GraphQL

En esta sección, comenzará a integrar el esquema GraphQL en el servidor Express básico. Lo hará definiendo un esquema, resoluciones y conectándose a un almacén de datos.

Para comenzar a integrar GraphQL en el servidor Express, instalará tres paquetes: graphql, express-graphqly @graphql-tools/schema. Ejecute el siguiente comando:

npm install graphql@14 express-graphql @graphql-tools/schema
  • graphql: la implementación de referencia de JavaScript para GraphQL.
  • express-graphql: middleware de servidor HTTP para GraphQL.
  • @graphql-tools/schema: un conjunto de utilidades para un desarrollo GraphQL más rápido.

Puede importar estos paquetes en el server.jsarchivo agregando las líneas resaltadas:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

...

El siguiente paso es crear un esquema GraphQL ejecutable.

Para evitar la sobrecarga de configurar una base de datos, puede usar un almacén en memoria para los datos que consultará el servidor GraphQL. Puede crear un dataobjeto con los valores que tendría su base de datos. Agregue las líneas resaltadas a su archivo:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

...

La estructura de datos aquí representa una tabla de base de datos llamada warriorsque tiene dos filas, representadas por las entradas Jaimey .Jorah

Con sus paquetes instalados y algunos datos en su lugar, ahora creará un esquema, que define la API describiendo los datos disponibles para ser consultados.

Esquema GraphQL

Ahora que tiene algunos datos básicos, puede comenzar a crear un esquema rudimentario para una API para obtener la cantidad mínima de código necesaria para comenzar a usar un punto final de GraphQL. Este esquema pretende replicar algo que podría usarse para un juego de rol de fantasía, en el que hay personajes que tienen roles como guerreros, magos y curanderos. Este ejemplo está destinado a ser abierto para que pueda agregar tanto o tan poco como desee, como hechizos y armas.

Un esquema GraphQL se basa en un sistema de tipos . Hay algunos tipos incorporados y también puede crear su propio tipo. Para este ejemplo, creará un nuevo typellamado Warriory le asignará dos campos: idy name.

type Warrior {
  id: ID!
  name: String!
}

El idtiene un IDtipo, y el nametiene un Stringtipo. Ambos son escalares integrados o tipos primitivos. El signo de exclamación ( !) significa que el campo no admite valores NULL y se requerirá un valor para cualquier instancia de este tipo.

La única información adicional que necesita para comenzar es un Querytipo base, que es el punto de entrada a la consulta de GraphQL. Lo definiremos warriorscomo una matriz de Warriortipos.

type Query {
  warriors: [Warrior]
}

Con estos dos tipos, tiene un esquema válido que se puede usar en el middleware HTTP de GraphQL. En última instancia, el esquema que defina aquí se pasará a la makeExecutableSchemafunción proporcionada por graphql-toolsas typeDefs. Las dos propiedades pasadas a un objeto en la makeExecutableSchemafunción serán las siguientes:

  • typeDefs: una cadena de lenguaje de esquema GraphQL.
  • resolvers: funciones que son llamadas para ejecutar un campo y producir un valor.

En server.js, después de importar las dependencias, cree una typeDefsvariable y asigne el esquema de GraphQL como una cadena, como se muestra aquí:

...

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

...

Ahora tiene definido su conjunto de datos y su esquema, como datay typeDefs, respectivamente. A continuación, creará resolutores para que la API sepa qué hacer con las solicitudes entrantes.

Funciones de resolución de GraphQL

Los solucionadores son una colección de funciones que generan una respuesta para el servidor GraphQL. Cada función de resolución tiene cuatro parámetros:

  • obj: El objeto principal, que no es necesario utilizar aquí porque ya es el objeto raíz o de nivel superior.
  • args: Cualquier argumento de GraphQL proporcionado al campo.
  • context: Estado compartido entre todos los resolutores, a menudo una conexión de base de datos.
  • info: Información adicional .

En este caso, creará una resolución para el Querytipo raíz y devolverá un valor para warriors.

Para comenzar con este servidor de ejemplo, pase el almacén de datos en memoria anterior en esta sección agregando las líneas resaltadas a server.js:

...

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

...

El punto de entrada al servidor GraphQL será a través del Querytipo raíz en los resolutores. Ahora ha agregado una función de resolución, llamada warriors, que regresará warriorsdesde context. contextes donde se incluirá el punto de entrada de la base de datos y, para esta implementación específica, será la datavariable que contenga el almacén de datos en memoria.

Cada función de resolución individual tiene cuatro parámetros: obj, args, contexty info. El parámetro más útil y relevante para nuestro esquema en este momento es context, que es un objeto compartido por los resolutores. A menudo se utiliza como conexión entre el servidor GraphQL y una base de datos.

Finalmente, con el conjunto typeDefsy resolverstodo, tiene suficiente información para crear un esquema ejecutable. Agregue las líneas resaltadas a su archivo:

...

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

...

La función makeExecutableSchema crea un esquema completo que puede pasar al punto final de GraphQL.

Ahora reemplace el punto final raíz predeterminado que actualmente regresa Hello, GraphQL!con el siguiente /graphqlpunto final agregando las líneas resaltadas:

...

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

...

La convención es que un servidor GraphQL utilizará el /graphqlpunto final. El uso del graphqlHTTPmiddleware requiere pasar el esquema y un contexto, que en este caso, es su almacén de datos simulado.

Ahora tiene todo lo necesario para comenzar a servir el endpoint. Su server.jscódigo debería verse así:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const app = express()
const port = 4000

// In-memory data store
const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

// Schema
const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

// Resolver for warriors
const resolvers = {
  Query: {
    warriors: (obj, args, context) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Entrypoint
app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Guarde y cierre el archivo cuando haya terminado.

Ahora debería poder ir http://localhost:4000/graphqly explorar su esquema utilizando GraphiQL IDE .

Su API de GraphQL ahora está completa según el esquema y los solucionadores que creó en esta sección. En la siguiente sección, usará GraphiQL IDE para ayudarlo a depurar y comprender su esquema.

Uso del IDE de GraphiQL

Dado que aplicó la graphiqlopción trueal middleware GraphQL, tiene acceso al entorno de desarrollo integrado (IDE) de GraphiQL. Si visitó el punto final de GraphQL en una ventana del navegador, se encontrará en GraphiQL.

GraphiQL es una herramienta en el navegador para escribir, validar y probar consultas de GraphQL. Ahora puede probar su servidor GraphQL para asegurarse de que está devolviendo los datos correctos.

Realice una consulta para warriors, solicitando las propiedades idy name. En su navegador, agregue las siguientes líneas al panel izquierdo de GraphiQL:

{
  warriors {
    id
    name
  }
}

Envíe la consulta presionando la flecha Reproducir en la parte superior izquierda y debería ver el valor de retorno en JSON en el lado derecho:

Output{
  "data": {
    "warriors": [
      { "id": "001", "name": "Jaime" },
      { "id": "002", "name": "Jorah" }
    ]
  }
}

Si elimina uno de los campos de la consulta, verá que el valor de retorno cambia en consecuencia. Por ejemplo, si solo desea recuperar el namecampo, puede escribir la consulta de esta manera:

{
  warriors {
    name
  }
}

Y ahora tu respuesta se verá así:

Output{
  "data": {
    "warriors": [{ "name": "Jaime" }, { "name": "Jorah" }]
  }
}

La capacidad de consultar solo los campos que necesita es uno de los aspectos poderosos de GraphQL y es lo que lo convierte en un lenguaje orientado al cliente .

De vuelta en GraphiQL, si hace clic en Documentos completamente a la derecha, se expandirá una barra lateral etiquetada Explorador de documentación . Desde esa barra lateral, puede hacer clic en la documentación para ver su esquema con más detalle.

Ahora su API está completa y ha explorado cómo usarla desde GraphiQL. El siguiente paso será realizar solicitudes reales de un cliente a su API de GraphQL.

Consultar la API de GraphQL desde un cliente

Al igual que con las API REST , un cliente puede comunicarse con una API GraphQL realizando solicitudes HTTP a través de la red. Dado que puede usar las API integradas del navegador fetchpara realizar solicitudes de red, también puede usarlas fetchpara consultar GraphQL.

Para un ejemplo muy básico, cree un esqueleto HTML en un index.htmlarchivo con una <pre>etiqueta:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL Client</title>
  </head>

  <pre><!-- data will be displayed here --></pre>

  <body>
    <script>
      // Add query here
    </script>
  </body>
</html>

En la scriptetiqueta, crea una función asíncrona que envíe una POSTsolicitud a la API de GraphQL:

...
<body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()
				
        // Append data to the pre tag
        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
...

El Content-Typeencabezado debe establecerse en application/jsony la consulta debe pasarse en el cuerpo como una cadena. El script llamará a la función para realizar la solicitud y establecerá la respuesta en la preetiqueta.

Aquí está el index.htmlcódigo completo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL</title>
  </head>

  <pre></pre>

  <body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()

        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
</html>

Guarde y cierre el archivo cuando haya terminado.

Ahora, cuando vea el index.htmlarchivo en un navegador, verá una solicitud de red saliente al http://localhost:4000/graphqlpunto final, que devolverá un correo electrónico 200con los datos. Puede ver esta solicitud de red abriendo Herramientas para desarrolladores y navegando a la pestaña Red .

Si su solicitud se procesó y obtuvo una 200respuesta con los datos de la API de GraphQL, ¡felicidades! Hiciste tu primer servidor API GraphQL.

Conclusión

En este tutorial, creó un servidor API GraphQL utilizando el marco Express en Node.js. El servidor GraphQL consta de un único /graphqlpunto final que puede gestionar las solicitudes entrantes para consultar el almacén de datos. Su API tenía un esquema con el Querytipo base, un Warriortipo personalizado y una resolución para obtener los datos adecuados para esos tipos.

Con suerte, este artículo ayudó a desmitificar GraphQL y abre nuevas ideas y posibilidades de lo que se puede lograr con GraphQL. Existen muchas herramientas que pueden ayudar con los aspectos más complejos del trabajo con GraphQL, como la autenticación, la seguridad y el almacenamiento en caché, pero aprender a configurar un servidor API de la manera más sencilla posible debería ayudarlo a comprender los aspectos esenciales de GraphQL.

Fuente del artículo original en https://www.digitalocean.com

#graphql #api #express #expressjs #nodo #nodejs 

Como criar um servidor de API GraphQL usando o Express JS no Node JS

Neste tutorial, você criará um servidor de API Express em Node.js que atende a um endpoint GraphQL. Você também criará um esquema GraphQL com base no sistema de tipos GraphQL, incluindo operações, como consultas e mutações, e funções de resolução para gerar respostas para quaisquer solicitações.

Configurando um servidor HTTP expresso

A primeira etapa é configurar um servidor Express, o que você pode fazer antes de escrever qualquer código GraphQL.

Em um novo projeto, você instalará expresse corscom o npm installcomando:

npm install express cors

Express será o framework para seu servidor. É uma estrutura de aplicativo da web para Node.js projetada para construir APIs. O pacote CORS , que é o middleware de Compartilhamento de Recursos C ross-O rigin , permitirá que você acesse facilmente este servidor a partir de um navegador.

Você também pode instalar o Nodemon como uma dependência de desenvolvimento:

npm install -D nodemon

Nodemon é uma ferramenta que ajuda a desenvolver aplicativos baseados em Node, reiniciando automaticamente o aplicativo quando são detectadas alterações de arquivo no diretório.

A instalação desses pacotes terá criado node_modulese package.jsoncom duas dependências e uma dependência dev listada.

Usando nanoou seu editor de texto favorito, abra package.jsonpara edição, que ficará assim:

{
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Há mais alguns campos que você adicionará neste momento. Para package.json, faça as seguintes alterações destacadas:

{
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.3"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "type": "module"
}

Você estará criando um arquivo para o servidor em server.js, então você mainaponta para server.js. Isso garantirá que npm starto servidor seja iniciado.

Para facilitar o desenvolvimento no servidor, você também cria um script chamado "dev"que executará o nodemon server.js.

Por fim, você adiciona um typepara modulegarantir que possa usar importinstruções em todo o código em vez de usar o CommonJS padrão require.

Salve e feche o arquivo quando terminar.

Em seguida, crie um arquivo chamado server.js. Nele, você criará um servidor Express simples, escutará na porta 4000e enviará uma solicitação dizendo Hello, GraphQL!. Para configurar isso, adicione as seguintes linhas ao seu novo arquivo:

import express from 'express'
import cors from 'cors'

const app = express()
const port = 4000

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get('/', (request, response) => {
  response.send('Hello, GraphQL!')
})

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Este bloco de código cria um servidor HTTP básico com Express. Ao invocar a expressfunção, você cria um aplicativo Express. Depois de definir algumas configurações essenciais para CORS e JSON, você definirá o que deve ser enviado com uma GETsolicitação para o root ( /) usando app.get('/'). Por fim, use app.listen()para definir a porta na qual o servidor de API deve estar escutando.

Salve e feche o arquivo quando terminar.

Agora você pode executar o comando para iniciar o servidor Node:

npm run dev

Se você visitar http://localhost:4000em um navegador ou executar um curl http://localhost:4000comando, verá o retorno Hello, GraphQL!, indicando que o servidor Express está em execução. Neste ponto, você pode começar a adicionar código para servir um endpoint GraphQL.

Configurando o middleware do servidor HTTP do GraphQL

Nesta seção, você começará a integrar o esquema GraphQL ao servidor Express básico. Você fará isso definindo um esquema, resolvedores e conectando-se a um armazenamento de dados.

Para começar a integrar o GraphQL no servidor Express, você instalará três pacotes: graphql, express-graphql, e @graphql-tools/schema. Execute o seguinte comando:

npm install graphql@14 express-graphql @graphql-tools/schema
  • graphql: a implementação de referência JavaScript para GraphQL.
  • express-graphql: middleware de servidor HTTP para GraphQL.
  • @graphql-tools/schema: um conjunto de utilitários para desenvolvimento mais rápido do GraphQL.

Você pode importar esses pacotes no server.jsarquivo adicionando as linhas destacadas:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

...

A próxima etapa é criar um esquema GraphQL executável.

Para evitar a sobrecarga de configurar um banco de dados, você pode usar um armazenamento na memória para os dados que o servidor GraphQL consultará. Você pode criar um dataobjeto com os valores que seu banco de dados teria. Adicione as linhas destacadas ao seu arquivo:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

...

A estrutura de dados aqui representa uma tabela de banco de dados chamada warriorsque possui duas linhas, representadas pelas entradas Jaimee .Jorah

Com seus pacotes instalados e alguns dados no lugar, você agora criará um esquema, que define a API descrevendo os dados disponíveis para serem consultados.

Esquema GraphQL

Agora que você tem alguns dados básicos, pode começar a criar um esquema rudimentar para uma API para obter a quantidade mínima de código necessária para começar a usar um endpoint GraphQL. Este esquema tem a intenção de replicar algo que possa ser usado para um jogo de RPG de fantasia, no qual existem personagens que possuem papéis como guerreiros, magos e curandeiros. Este exemplo deve ser aberto para que você possa adicionar o quanto quiser, como feitiços e armas.

Um esquema GraphQL depende de um sistema de tipos . Existem alguns tipos internos e você também pode criar seu próprio tipo. Para este exemplo, você criará um novo typechamado Warriore fornecerá dois campos: ide name.

type Warrior {
  id: ID!
  name: String!
}

O idtem um IDtipo e o nametem um Stringtipo. Ambos são escalares embutidos ou tipos primitivos. O ponto de exclamação ( !) significa que o campo não permite valor nulo e um valor será necessário para qualquer instância desse tipo.

A única informação adicional necessária para começar é um Querytipo base, que é o ponto de entrada para a consulta do GraphQL. Vamos definir warriorscomo uma matriz de Warriortipos.

type Query {
  warriors: [Warrior]
}

Com esses dois tipos, você tem um esquema válido que pode ser usado no middleware HTTP do GraphQL. Por fim, o esquema que você definir aqui será passado para a makeExecutableSchemafunção fornecida por graphql-toolsas typeDefs. As duas propriedades passadas para um objeto na makeExecutableSchemafunção serão as seguintes:

  • typeDefs: uma string de linguagem de esquema GraphQL.
  • resolvers: funções que são chamadas para executar um campo e produzir um valor.

Em server.js, após importar as dependências, crie uma typeDefsvariável e atribua o esquema do GraphQL como uma string, conforme mostrado aqui:

...

const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

...

Agora você tem seu conjunto de dados e seu esquema definidos, como datae typeDefs, respectivamente. Em seguida, você criará resolvedores para que a API saiba o que fazer com as solicitações recebidas.

Funções do Resolvedor GraphQL

Os resolvedores são uma coleção de funções que geram uma resposta para o servidor GraphQL. Cada função de resolver tem quatro parâmetros:

  • obj: O objeto pai, que não é necessário usar aqui, pois já é a raiz ou o objeto de nível superior.
  • args: quaisquer argumentos do GraphQL fornecidos ao campo.
  • context: Estado compartilhado entre todos os resolvedores, geralmente uma conexão de banco de dados.
  • info: Informações adicionais .

Nesse caso, você criará um resolvedor para o Querytipo raiz e retornará um valor para warriors.

Para começar com este servidor de exemplo, passe o armazenamento de dados na memória anterior nesta seção adicionando as linhas destacadas a server.js:

...

const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

...

O ponto de entrada no servidor GraphQL será por meio do Querytipo raiz nos resolvedores. Agora você adicionou uma função de resolução, chamada warriors, que retornará warriorsde context. contexté onde o ponto de entrada do banco de dados estará contido e, para essa implementação específica, será a datavariável que contém o armazenamento de dados na memória.

Cada função de resolvedor individual tem quatro parâmetros: obj, args, contexte info. O parâmetro mais útil e relevante para nosso esquema agora é context, que é um objeto compartilhado pelos resolvedores. É frequentemente usado como a conexão entre o servidor GraphQL e um banco de dados.

Finalmente, com o typeDefse resolverstudo configurado, você tem informações suficientes para criar um esquema executável. Adicione as linhas destacadas ao seu arquivo:

...

const resolvers = {
  Query: {
    warriors: (obj, args, context, info) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

...

A função makeExecutableSchema cria um esquema completo que você pode passar para o endpoint do GraphQL.

Agora substitua o endpoint raiz padrão que está retornando no momento Hello, GraphQL!pelo seguinte /graphqlendpoint adicionando as linhas destacadas:

...

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

...

A convenção é que um servidor GraphQL usará o /graphqlendpoint. Usar o graphqlHTTPmiddleware requer passar o esquema e um contexto, que neste caso, é seu armazenamento de dados simulado.

Agora você tem tudo o que é necessário para começar a servir o endpoint. Seu server.jscódigo deve ficar assim:

import express from 'express'
import cors from 'cors'
import { graphqlHTTP } from 'express-graphql'
import { makeExecutableSchema } from '@graphql-tools/schema'

const app = express()
const port = 4000

// In-memory data store
const data = {
  warriors: [
    { id: '001', name: 'Jaime' },
    { id: '002', name: 'Jorah' },
  ],
}

// Schema
const typeDefs = `
type Warrior {
  id: ID!
  name: String!
}

type Query {
  warriors: [Warrior]
}
`

// Resolver for warriors
const resolvers = {
  Query: {
    warriors: (obj, args, context) => context.warriors,
  },
}

const executableSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Entrypoint
app.use(
  '/graphql',
  graphqlHTTP({
    schema: executableSchema,
    context: data,
    graphiql: true,
  })
)

app.listen(port, () => {
  console.log(`Running a server at http://localhost:${port}`)
})

Salve e feche o arquivo quando terminar.

Agora você deve poder acessar http://localhost:4000/graphqle explorar seu esquema usando o GraphiQL IDE .

Sua API GraphQL agora está completa com base no esquema e nos resolvedores que você criou nesta seção. Na próxima seção, você usará o GraphiQL IDE para ajudá-lo a depurar e entender seu esquema.

Usando o GraphiQL IDE

Como você aplicou a graphiqlopção quanto trueao middleware GraphQL, você tem acesso ao ambiente de desenvolvimento integrado (IDE) do GraphiQL. Se você visitou o endpoint do GraphQL em uma janela do navegador, você se encontrará no GraphiQL.

GraphiQL é uma ferramenta no navegador para escrever, validar e testar consultas GraphQL. Agora você pode testar seu servidor GraphQL para garantir que ele esteja retornando os dados corretos.

Faça uma consulta para warriors, solicitando as propriedades ide name. No seu navegador, adicione as seguintes linhas ao painel esquerdo do GraphiQL:

{
  warriors {
    id
    name
  }
}

Envie a consulta pressionando a seta Reproduzir no canto superior esquerdo e você verá o valor de retorno em JSON no lado direito:

Output{
  "data": {
    "warriors": [
      { "id": "001", "name": "Jaime" },
      { "id": "002", "name": "Jorah" }
    ]
  }
}

Se você remover um dos campos da consulta, verá o valor de retorno mudar de acordo. Por exemplo, se você deseja apenas recuperar o namecampo, pode escrever a consulta assim:

{
  warriors {
    name
  }
}

E agora sua resposta ficará assim:

Output{
  "data": {
    "warriors": [{ "name": "Jaime" }, { "name": "Jorah" }]
  }
}

A capacidade de consultar apenas os campos necessários é um dos aspectos poderosos do GraphQL e é o que o torna uma linguagem orientada para o cliente .

De volta ao GraphiQL, se você clicar em Docs totalmente à direita, ele expandirá uma barra lateral chamada Documentation Explorer . Nessa barra lateral, você pode clicar na documentação para visualizar seu esquema com mais detalhes.

Agora sua API está completa e você explorou como usá-la no GraphiQL. A próxima etapa será fazer solicitações reais de um cliente para sua API GraphQL.

Consultando a API GraphQL de um cliente

Assim como nas APIs REST , um cliente pode se comunicar com uma API GraphQL fazendo solicitações HTTP pela rede. Como você pode usar APIs integradas do navegador, como fetchfazer solicitações de rede, também pode usar fetchpara consultar o GraphQL.

Para um exemplo bem básico, crie um esqueleto HTML em um index.htmlarquivo com uma <pre>tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL Client</title>
  </head>

  <pre><!-- data will be displayed here --></pre>

  <body>
    <script>
      // Add query here
    </script>
  </body>
</html>

Na scripttag, crie uma função assíncrona que envie uma POSTsolicitação à API GraphQL:

...
<body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()
				
        // Append data to the pre tag
        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
...

O Content-Typecabeçalho deve ser definido como application/jsone a consulta deve ser passada no corpo como uma string. O script chamará a função para fazer a solicitação e definirá a resposta na pretag.

Aqui está o index.htmlcódigo completo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>GraphQL</title>
  </head>

  <pre></pre>

  <body>
    <script>
      async function queryGraphQLServer() {
        const response = await fetch('http://localhost:4000/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            query: '{ warriors { name } }',
          }),
        })
        const data = await response.json()

        const pre = document.querySelector('pre')
        pre.textContent = JSON.stringify(data, null, 2) // Pretty-print the JSON
      }

      queryGraphQLServer()
    </script>
  </body>
</html>

Salve e feche o arquivo quando terminar.

Agora, ao visualizar o index.htmlarquivo em um navegador, você verá uma solicitação de rede de saída para o http://localhost:4000/graphqlendpoint, que retornará um 200com os dados. Você pode visualizar essa solicitação de rede abrindo as Ferramentas do desenvolvedor e navegando até a guia Rede .

Se sua solicitação foi atendida e você obteve uma 200resposta com os dados da API GraphQL, parabéns! Você criou seu primeiro servidor de API GraphQL.

Conclusão

Neste tutorial, você criou um servidor de API GraphQL usando a estrutura Express em Node.js. O servidor GraphQL consiste em um único /graphqlendpoint que pode manipular solicitações de entrada para consultar o armazenamento de dados. Sua API tinha um esquema com o Querytipo base, um Warriortipo personalizado e um resolvedor para buscar os dados adequados para esses tipos.

Felizmente, este artigo ajudou a desmistificar o GraphQL e abre novas ideias e possibilidades do que pode ser realizado com o GraphQL. Existem muitas ferramentas que podem ajudar nos aspectos mais complexos do trabalho com GraphQL, como autenticação, segurança e armazenamento em cache, mas aprender como configurar um servidor de API da maneira mais simples possível deve ajudá-lo a entender os fundamentos do GraphQL.

Fonte do artigo original em https://www.digitalocean.com

#graphql #api #express #expressjs #node #nodejs 

Hire Dedicated Node.js Developers - Hire Node.js Developers

If you look at the backend technology used by today’s most popular apps there is one thing you would find common among them and that is the use of NodeJS Framework. Yes, the NodeJS framework is that effective and successful.

If you wish to have a strong backend for efficient app performance then have NodeJS at the backend.

WebClues Infotech offers different levels of experienced and expert professionals for your app development needs. So hire a dedicated NodeJS developer from WebClues Infotech with your experience requirement and expertise.

So what are you waiting for? Get your app developed with strong performance parameters from WebClues Infotech

For inquiry click here: https://www.webcluesinfotech.com/hire-nodejs-developer/

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated node.js developers #hire node.js developers #hire top dedicated node.js developers #hire node.js developers in usa & india #hire node js development company #hire the best node.js developers & programmers

Aria Barnes

Aria Barnes

1622719015

Why use Node.js for Web Development? Benefits and Examples of Apps

Front-end web development has been overwhelmed by JavaScript highlights for quite a long time. Google, Facebook, Wikipedia, and most of all online pages use JS for customer side activities. As of late, it additionally made a shift to cross-platform mobile development as a main technology in React Native, Nativescript, Apache Cordova, and other crossover devices. 

Throughout the most recent couple of years, Node.js moved to backend development as well. Designers need to utilize a similar tech stack for the whole web project without learning another language for server-side development. Node.js is a device that adjusts JS usefulness and syntax to the backend. 

What is Node.js? 

Node.js isn’t a language, or library, or system. It’s a runtime situation: commonly JavaScript needs a program to work, however Node.js makes appropriate settings for JS to run outside of the program. It’s based on a JavaScript V8 motor that can run in Chrome, different programs, or independently. 

The extent of V8 is to change JS program situated code into machine code — so JS turns into a broadly useful language and can be perceived by servers. This is one of the advantages of utilizing Node.js in web application development: it expands the usefulness of JavaScript, permitting designers to coordinate the language with APIs, different languages, and outside libraries.

What Are the Advantages of Node.js Web Application Development? 

Of late, organizations have been effectively changing from their backend tech stacks to Node.js. LinkedIn picked Node.js over Ruby on Rails since it took care of expanding responsibility better and decreased the quantity of servers by multiple times. PayPal and Netflix did something comparative, just they had a goal to change their design to microservices. We should investigate the motivations to pick Node.JS for web application development and when we are planning to hire node js developers. 

Amazing Tech Stack for Web Development 

The principal thing that makes Node.js a go-to environment for web development is its JavaScript legacy. It’s the most well known language right now with a great many free devices and a functioning local area. Node.js, because of its association with JS, immediately rose in ubiquity — presently it has in excess of 368 million downloads and a great many free tools in the bundle module. 

Alongside prevalence, Node.js additionally acquired the fundamental JS benefits: 

  • quick execution and information preparing; 
  • exceptionally reusable code; 
  • the code is not difficult to learn, compose, read, and keep up; 
  • tremendous asset library, a huge number of free aides, and a functioning local area. 

In addition, it’s a piece of a well known MEAN tech stack (the blend of MongoDB, Express.js, Angular, and Node.js — four tools that handle all vital parts of web application development). 

Designers Can Utilize JavaScript for the Whole Undertaking 

This is perhaps the most clear advantage of Node.js web application development. JavaScript is an unquestionable requirement for web development. Regardless of whether you construct a multi-page or single-page application, you need to know JS well. On the off chance that you are now OK with JavaScript, learning Node.js won’t be an issue. Grammar, fundamental usefulness, primary standards — every one of these things are comparable. 

In the event that you have JS designers in your group, it will be simpler for them to learn JS-based Node than a totally new dialect. What’s more, the front-end and back-end codebase will be basically the same, simple to peruse, and keep up — in light of the fact that they are both JS-based. 

A Quick Environment for Microservice Development 

There’s another motivation behind why Node.js got famous so rapidly. The environment suits well the idea of microservice development (spilling stone monument usefulness into handfuls or many more modest administrations). 

Microservices need to speak with one another rapidly — and Node.js is probably the quickest device in information handling. Among the fundamental Node.js benefits for programming development are its non-obstructing algorithms.

Node.js measures a few demands all at once without trusting that the first will be concluded. Many microservices can send messages to one another, and they will be gotten and addressed all the while. 

Versatile Web Application Development 

Node.js was worked in view of adaptability — its name really says it. The environment permits numerous hubs to run all the while and speak with one another. Here’s the reason Node.js adaptability is better than other web backend development arrangements. 

Node.js has a module that is liable for load adjusting for each running CPU center. This is one of numerous Node.js module benefits: you can run various hubs all at once, and the environment will naturally adjust the responsibility. 

Node.js permits even apportioning: you can part your application into various situations. You show various forms of the application to different clients, in light of their age, interests, area, language, and so on. This builds personalization and diminishes responsibility. Hub accomplishes this with kid measures — tasks that rapidly speak with one another and share a similar root. 

What’s more, Node’s non-hindering solicitation handling framework adds to fast, letting applications measure a great many solicitations. 

Control Stream Highlights

Numerous designers consider nonconcurrent to be one of the two impediments and benefits of Node.js web application development. In Node, at whatever point the capacity is executed, the code consequently sends a callback. As the quantity of capacities develops, so does the number of callbacks — and you end up in a circumstance known as the callback damnation. 

In any case, Node.js offers an exit plan. You can utilize systems that will plan capacities and sort through callbacks. Systems will associate comparable capacities consequently — so you can track down an essential component via search or in an envelope. At that point, there’s no compelling reason to look through callbacks.

 

Final Words

So, these are some of the top benefits of Nodejs in web application development. This is how Nodejs is contributing a lot to the field of web application development. 

I hope now you are totally aware of the whole process of how Nodejs is really important for your web project. If you are looking to hire a node js development company in India then I would suggest that you take a little consultancy too whenever you call. 

Good Luck!

Original Source

#node.js development company in india #node js development company #hire node js developers #hire node.js developers in india #node.js development services #node.js development