Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Tutorial de cliente Vue.js con GraphQL y Apollo

 A lo largo de este tutorial, aprenderemos a usar Vue.js con el cliente Apollo para crear una interfaz CRUD para consumir una API construida con Node.js, Express y GraphQL.

Vue es una biblioteca de UI progresiva moderna para construir interfaces de usuario similares a React, la biblioteca que se ha utilizado tradicionalmente con GraphQL desde que ambas tecnologías se originaron en Facebook.

La mayoría de los tutoriales en la web usan React con su ecosistema para consumir una API GraphQL, así que veamos cómo usar Vue en su lugar.

Usaremos el cliente Apollo para interactuar realmente con GraphQL en lugar de clientes tradicionales como Axios.

Apollo es una plataforma completa para implementar servidores y clientes GraphQL y otras características avanzadas requeridas por aplicaciones de producción como almacenamiento en caché y administración de estado. Con Apollo, puede transferir datos fácilmente entre el servidor y la interfaz de usuario de su aplicación creada con sus bibliotecas favoritas, como React o Vue. En este tutorial, usaremos el cliente Apollo sin el servidor ya que ya hemos creado nuestro servidor usando Express.

Apollo se compone de muchas herramientas para facilitar el trabajo con GraphQL en sus aplicaciones.

Veremos en este tutorial cómo podemos usar el cliente y dejar el servidor para otro tutorial.

Apollo es creado por el Meteor Development Group .

Consumiremos una API GraphQL para administrar una base de datos de empleados disponible en este IDE en línea .

¡Comencemos con los requisitos previos!

Prerrequisitos

Para completar con éxito este tutorial, necesitará tener algunos requisitos previos:

  • Debe tener Node.js y NPM instalados en su sistema, ya sea para ejecutar el servidor GraphQL localmente o también para Vue CLI. Simplemente puede ir al sitio web oficial y descargar el binario para su sistema.
  • La familiaridad con JavaScript moderno y un conocimiento práctico de Vue son imprescindibles.

Para el servidor GraphQL, puede seguir este tutorial para crear su aplicación localmente o usar el mismo ejemplo de este IDE en línea .

¡Ahora, comencemos!

Habilitando CORS en GraphQL Server

Si está desarrollando localmente usando dos puertos diferentes, necesita habilitar CORS en su servidor GraphQL.

Primero, instale el módulo cors desde npm usando el siguiente comando:

$ cd node-express-graphql-api
$ npm install cors --save

A continuación, importe el corsmódulo en el index.jsarchivo de la siguiente manera:

const cors = require('cors');

A continuación, agregue el corsmiddleware al servidor Express.js de la siguiente manera:

const app = express();
app.use(cors())

Ahora puede iniciar su servidor GraphQL y enviar solicitudes desde su aplicación frontend:

$ node index.js

Su servidor GraphQL estará escuchando http://localhost:4000/.

Instalación de la interfaz de línea de comandos de Vue

Vue CLI es la herramienta oficial para inicializar y trabajar con proyectos de Vue.js. Está basado en Node.js y se puede instalar desde npm usando el siguiente comando:

$ npm install -g @vue/cli

En el momento de escribir este tutorial de Vue y Graphql, tendrá vue / cli v3.8.2 instalado en su máquina de desarrollo.

Eso es. Ahora estamos listos para crear nuestra aplicación Vue.js.

Inicializando un proyecto de Vue.js

Puede inicializar rápidamente un nuevo proyecto de Vue.js con el siguiente comando:

$ vue create vue-apollo-demo

Seleccione el preajuste predeterminado cuando se le solicite.

Cuando se genere su proyecto, navegue hasta la carpeta raíz e inicie el servidor de desarrollo local:

$ cd vue-apollo-demo
$ npm run serve

Su aplicación Vue.js estará disponible en la http://localhost:8080/dirección.

Esta es una captura de pantalla de nuestra aplicación en este punto de nuestro tutorial:

Ejemplo de Vue.js y GraphQL

Instalación del cliente Apollo

Nuestro servidor GraphQL está construido con Node.js y Express sin usar el servidor Apollo, pero podemos usar el cliente Apollo en lugar de Axios para consumir nuestra API GraphQL desde nuestra interfaz Vue.js.

Comencemos por instalar el cliente Apollo en nuestro proyecto Vue.js. Abra una nueva interfaz de línea de comandos, navegue hasta su proyecto y ejecute el siguiente comando para instalar el cliente desde npm:

$ npm install --save vue-apollo graphql apollo-boost

También instalamos graphqlapollo-boost.

vue-apollo es una biblioteca que integra apollo con Vue.

Según el repositorio oficial

Apollo Boost es una forma de configuración cero para comenzar a usar Apollo Client. Incluye algunos valores predeterminados sensibles, como nuestro recomendado InMemoryCacheHttpLink, que vienen configurados para usted con nuestros ajustes recomendados.

Vincular el cliente Apollo con el servidor GraphQL

Abra el src/main.jsarchivo de su aplicación Vue y comencemos por inicializar el cliente Apollo y vincularlo con nuestro servidor GraphQL que se ejecuta en https://repl.it/@techiediaries/Node-GraphQL-Example/graphql:

import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"

const apolloClient = new ApolloClient({
    uri: "https://repl.it/@techiediaries/Node-GraphQL-Example/graphql"
})

Vue.use(VueApollo)

const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
})

Esto es lo que hemos hecho:

  • Importamos el cliente y el VueApollocomplemento Apollo de su paquete.
  • A continuación, inicializamos el cliente Apollo y proporcionamos la URL de nuestro servidor GraphQL.
  • A continuación, agregamos el VueApollocomplemento a nuestra aplicación Vue.js.
  • Finalmente, creamos el proveedor Apollo y lo vinculamos con nuestro cliente Apollo.

A continuación, debe conectar el proveedor de Apollo con la aplicación Vue de la siguiente manera:

new Vue({
    render: h => h(App),
    apolloProvider,
}).$mount('#app')

Los componentes de Vue ahora pueden acceder al cliente Apollo para enviar solicitudes al servidor GraphQL.

Envío de solicitudes de API al servidor GraphQL

Ahora que hemos configurado el cliente GraphQL y Apollo en nuestra aplicación Vue.js. Veamos cómo podemos enviar solicitudes de API al servidor GraphQL desde nuestros componentes de Vue.

Nuestro servidor GraphQL expone una API simple para administrar empleados en una base de datos. Cada empleado tiene un nombre, teléfono, correo electrónico y dirección.

No necesitamos crear muchos componentes en nuestro ejemplo simple. El Appcomponente puede ser suficiente, así que vayamos al src/App.vuearchivo y comencemos declarando algunas variables para almacenar los datos:

<script>
export default {
  name: 'app',
  data(){
    return {
        id: null,
        name: '',
        phone: '',
        email:'',
        address: '',
      }
  },

Declaramos los idnamephoneaddressemaillas variables que serán utilizados en la forma de creación de nuevos empleados.

Obtención de datos con consultas GraphQL

GraphQL proporciona un potente lenguaje de consulta para consultar datos. Simplemente necesitamos crear la consulta correcta y enviarla al servidor para solicitar datos.

Primero, necesitamos usar la gqletiqueta del módulo graphql-tag para definir la consulta y agregar el apolloobjeto al componente que contendrá cualquier consulta que queramos enviar al servidor GraphQL. Esto es un ejemplo:

<script>
import gql from 'graphql-tag'
export default {
  name: 'app',
  data(){
    return {
      id: null,
      name: '',
      email: '',
      phone: '',
      address: ''}
  },
  apollo: {
    employees: gql`query {
      employees {
        id,
        name,
        email,
        phone,
        address
      }
    }`,
  },

Nota : gqlhabilita el análisis de las consultas GraphQL al GraphQL AST.

El atributo de empleados en el apolloobjeto se utilizará para almacenar los datos devueltos por la employeesconsulta. Se puede utilizar como cualquier variable de Vue en la plantilla para mostrar los datos de los empleados.

Crear y eliminar datos con mutaciones GraphQL

Al igual que usamos el cliente Apollo para enviar consultas GraphQL para obtener datos de la API. También podemos usar Apollo para enviar mutaciones que son los equivalentes de GraphQL a las operaciones CREATE, UPDATE y DELETE en el mundo REST.

En su App.vuecomponente, defina los métodos createEmpolyee()updateEmpoylee()y de la deleteEmployee()siguiente manera:


 methods: {
    createEmployee(name, email, phone, address){
      this.$apollo.mutate({
          mutation: gql`mutation createEmployee($name: String!, $email: String!, $phone: String!, $address: String!){
            createEmployee(name: $name, email: $email, phone: $phone, address: $address) {
              id,
              name,
              email,
              phone,
              address}
          }`,
          variables:{
            name: name,
            email: email,
            phone: phone,
            address: address
          }
        }
      )
      location.reload();
    },
    updateEmployee(id, name, email, phone, address){

      this.$apollo.mutate({
          mutation: gql`mutation updateEmployee($id: ID!, $name: String!, $email: String!, $phone: String!, $address: String!){
            updateEmployee(id: $id, name: $name, email: $email, phone: $phone, address: $address)
          `,
          variables:{
            id: id,
            name: name,
            email: email,
            phone: phone,
            address: address
          }
        }
      )
      location.reload();
    },
    deleteEmployee(id){
      this.$apollo.mutate({
          mutation: gql`mutation deleteEmployee($id: ID!){
            deleteEmployee(id: $id)
          }`,
          variables:{
            id: id,
          }
        }
      )
      location.reload();
    },

En todos nuestros métodos, llamamos al mutate()método del $apolloobjeto para realizar mutaciones GraphQL.

Después de definir los métodos de mutación, creemos ahora otros dos métodos:

  • El loadEmployeeIntoForm()método para cargar un empleado de la tabla HTML en el formulario donde podemos actualizarlo,
  • El resetForm()método para restablecer el formulario.

En el objeto de métodos del App.vuecomponente, agregue los siguientes métodos de la siguiente manera:

    loadEmployeeIntoForm(employee){
      this.id = employee.id;
      this.name = employee.name;
      this.email = employee.email;
      this.phone = employee.phone;
      this.address = employee.address;
    },
    resetForm(){
      this.id = null;
      this.name = '';
      this.email = '';
      this.phone = '';
      this.address = '';
    }   

Después de definir estos métodos, necesitamos crear la plantilla para mostrar la lista de empleados recuperados y un formulario para actualizar un empleado seleccionado de la tabla.

Creando la interfaz de usuario de Vue

La interfaz de usuario de nuestra aplicación consistirá en una tabla HTML y un formulario que se vinculará con la variable de empleados del objeto apollo y los métodos previamente definidos.

Comencemos con la tabla HTML. Regrese al src/App.vuearchivo y reemplace la plantilla existente con lo siguiente:

<h1>Employees database</h1>
<template>
  <div id="app">
  <table border='1' width='100%' style='border-collapse: collapse;'>
   <tr>
     <th>Name</th>
     <th>Email</th>
     <th>Phone</th>
     <th>Address</th>
     <th>Operations</th>
   </tr>

   <tr v-for='employee in employees'>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td>
      <input type="button" @click="loadEmployeeIntoForm(employee)" value="Update">
      <input type="button" @click="deleteEmployee(employee.id)" value="Delete">
     </td> 
   </tr>
 </table>


</div>
</template>

Simplemente iteramos sobre el employeesatributo del apolloobjeto usando una v-fordirectiva y mostramos el nombre, correo electrónico, teléfono y dirección de los empleados dentro de una tabla HTML. También agregamos dos botones para cada empleado para permitir que los usuarios actualicen y eliminen a un empleado.

Al hacer clic en el botón Actualizar , el empleado correspondiente se cargará en un HTML debajo de la tabla que crearemos a continuación. Luego, podemos modificar la información del empleado y enviar la mutación de actualización real.

Agreguemos ahora un formulario a nuestra plantilla:

    <form>
      <label>Employee name</label>
      <input type="text" name="name" v-model="name">
      </br>

      <label>Employee email</label>
      <input type="email" name="email" v-model="email">
      </br>

      <label>Employee phone</label>
      <input type="text" name="phone" v-model="phone">

      <label>Employee address</label>
      <textarea name="address" v-model="address"></textarea>

      <input v-if="!id" type="button" @click="createEmployee(name, email, phone, address)" value="Create employee">
      <input v-if="id" type="button" @click="updateEmployee(id, email, phone, address)" value="Update employee">
      <input type="button" @click="restForm()" value="Reset">
    </form>


El formulario tiene cuatro campos de entrada para agregar información del empleado. Podemos usar el formulario para crear un nuevo empleado o actualizar un empleado existente cargado desde la tabla.

También puede hacer clic en el botón Restablecer para restablecer el formulario después de seleccionar un empleado de la tabla HTML.

Envolver

Como resumen de nuestro tutorial de Vue.js y GraphQL, hemos creado una aplicación Vue y Apollo que consume una API construida con Node y GraphQL para administrar una base de datos de empleados.

Hemos visto cómo enviar consultas GraphQL para obtener datos y mutaciones para crear, actualizar y eliminar datos.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas