GraphQL y cliente Vue.js
Un servicio GraphQL es un lenguaje de consulta y un runtime para ejecutar esas consultas, diseñado para proporcionar una alternativa
más flexible y eficiente a los servicios web API tradicionales como REST. Permite a los clientes solicitar exactamente los datos que necesitan y nada más, lo que contrasta con los endpoints fijos y las estructuras de respuesta rígidas de REST.
A destacar:
1) Endpoint único: a diferencia de REST, donde cada recurso tiene un Endpoint separado, GraphQL expone un endpoint único a través del
cual se realizan todas las consultas.
2) Basado en esquemas: GraphQL define un esquema sólido y con seguridad de tipos que especifica las consultas, mutations y tipos disponibles, lo que garantiza respuestas predecibles.
3) Consultas especificadas por el cliente: los clientes deciden qué campos incluir en su solicitud, minimizando la obtención excesiva
(obtener demasiados datos) o la obtención insuficiente (obtener datos insuficientes).
Ventajas sobre la web API (REST):
1)Obtención de datos eficiente: los clientes pueden solicitar solo los campos necesarios, lo que reduce el tamaño de la carga útil y optimiza el rendimiento.
2) Solicitud única de recursos anidados: en REST, la obtención de datos relacionados puede requerir múltiples solicitudes; GraphQL permite
consultar recursos anidados en una sola petición.
3) Tipado de datos: Schema garantiza una documentación clara y una verificación de errores en el momento de la consulta, lo que reduce
la ambigüedad y los errores.
4) API sin versión: REST a menudo requiere control de versiones (por ejemplo, v1, v2), pero GraphQL evoluciona sin crear nuevos puntos
finales, ya que los clientes solo consultan lo que necesitan.
5) Flexibilidad mejorada: los clientes tienen control total sobre los datos que se devuelven, lo que proporciona más flexibilidad que
las rutas REST predefinidas.
6) Menos tiempo de codificación para los desarrolladores: los desarrolladores backend se centran en definir un esquema,
mientras que los desarrolladores frontend eligen qué consultar, lo que reduce el esfuerzo de coordinación.
<template>
<div>
<h1>Books List</h1>
<div v-if="loading">Loading...</div>
<div v-if="error">{{ error.message }}</div>
<ul v-if="books.length > 0">
<li v-for="book in books" :key="book.id">
<strong>{{ book.title }}</strong> by {{ book.author }} ({{ book.publishedYear }})
<br />
Genre: {{ book.genre }}
</li>
</ul>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { ApolloClient, InMemoryCache, gql } from '@apollo/client/core';
export default {
setup() {
// State management using Vue 3 Composition API
const books = ref([]);
const loading = ref(true);
const error = ref(null);
// Create an Apollo Client instance
const client = new ApolloClient({
uri: 'http://localhost:5001/graphql', // Your .NET Core GraphQL endpoint
cache: new InMemoryCache(),
});
Por su lado, Vue.js es un framework open source de JavaScript, que nos permite la creación de interfaces de usuario y aplicaciones de una sola página (single-page application o SPA, en inglés), de una forma muy sencilla. Fue creado, o desarrollado, por un ex empleado de Google, Evan You, en el año 2014. Con respecto a otros frameworks, la curva de aprendizaje es baja, si conoces los fundamentos de JavaScript. Además, es muy sencillo de utilizar ya que podemos utilizar este framework simplemente con la inclusión de sus dependencias mediante CDN.
