Te encantará GraphQL en React si lees esta publicación

¿Qué es GraphQL? 🤔

GraphQL es un lenguaje de consulta para su API y un tiempo de ejecución del lado del servidor para ejecutar consultas mediante el uso de un sistema de tipos que defina para sus datos.

En términos más simples, graphQL es una sintaxis que describe cómo solicitar datos. Facebook lo lanzó públicamente en 2015 y, desde entonces, muchas empresas han adoptado GraphQL en su pila.

De los documentos oficiales:

Una vez que se ejecuta un servicio GraphQL (generalmente en una URL en un servicio web), se pueden enviar consultas GraphQL para validar y ejecutar. Una consulta recibida primero se verifica para asegurarse de que solo se refiera a los tipos y campos definidos, luego ejecuta las funciones proporcionadas para producir un resultado.

Puede crear un servidor que pueda responder a las consultas de graphQL en el idioma que desee. A la aplicación del lado del cliente no le importa esto hasta que pueda enviar una consulta de graphQL al punto final y obtener los datos deseados.

¿Por qué usar GraphQL? 💪🏼

Muchos consideran GraphQL como un reemplazo para REST, que es bastante inexacto.
REST (Transferencia de estado representacional) es una arquitectura de diseño de API utilizada en software basado en red para transferir los datos.

Tiene muchas limitaciones. Podría requerir múltiples viajes de ida y vuelta para obtener recursos relacionados. Otro problema común es la búsqueda insuficiente (no obtener todo de una sola vez) o la obtención excesiva (obtener más de lo que se necesita de una sola vez).

A medida que crece la aplicación, la cantidad de puntos finales que se requieren también puede aumentar y hacer que el mantenimiento de la base de código sea mucho más difícil. El servidor decide qué datos se enviarán al cliente y el cliente no tiene control sobre ellos.

GraphQL proporciona un lenguaje de consulta, una especificación y una colección de herramientas que ayudan a resolver estos problemas, con un mejor rendimiento y flexibilidad.

Las mayores ventajas son:

Solo habría un punto final (la mayoría de las veces) que hace la vida más fácil
El cliente puede decidir qué datos consultar

Consideremos un ejemplo para hacer esto más claro. Suponga que está creando una aplicación que muestra detalles de Libros. El libro tiene los siguientes campos: id, título, autor, género.

En una página, desea mostrar la identificación y el título. En otra página, desea mostrar el título y el autor, y en una tercera página desea mostrar el título y el género.

Si va a implementar esto de manera óptima utilizando una arquitectura de API REST, necesitaría tres puntos finales diferentes. Al usar graphQL, puede usar un punto final único que proporciona todos los datos y consultar solo los datos requeridos desde la aplicación del lado del cliente.

Un servicio GraphQL se crea definiendo tipos y campos en esos tipos y luego proporcionando funciones para cada campo en cada tipo. Esto hace que graphQL sea menos propenso a errores.

GraphQL en React 💻

Profundicemos en el tema de la publicación, que es comenzar con graphQL en React. Aunque pasamos por una introducción básica de graphQL, este tutorial asume que ya está familiarizado con React y con la implementación de una aplicación React simple. Ahora veremos cómo usar graphQL en react.

React tiene un ecosistema muy activo que lo rodea y ya tiene muchas herramientas que hacen que usar GraphQL sea muy fácil.

Echemos un vistazo a todos los paquetes necesarios para comenzar.

apollo-boost: es una forma de configuración cero para comenzar con GraphQL en reaccionar.
react-apollo: el cliente Apollo es la mejor manera de usar GraphQL en aplicaciones del lado del cliente. React-apollo proporciona una integración entre GraphQL y el cliente Apollo
graphql-tag: una etiqueta literal de plantilla de JavaScript que analiza las consultas de GraphQL

y por supuesto GraphQL.

Veamos la implementación del código real.

El primer paso es importar apollo-client desde apollo-boost.

import ApolloClient from ‘apollo-boost’
import { ApolloProvider } from ‘react-apollo’

Una vez que tengamos el objeto apollo, crearemos una instancia de cliente apollo con la propiedad uri. Este es el punto final real que nos proporcionará los datos que se mostrarán en nuestra aplicación de reacción del lado del cliente. Esto se puede hacer usando la siguiente línea de código.

const client = new ApolloClient({
    uri: ‘https://r95kv5p84n.lp.gql.zone/graphql',
})

Para fines de demostración, hemos configurado un punto final que nos proporcionará datos del libro: identificación, nombre y autor. Apollo Launchpad lo ayuda a configurar puntos finales pseudographQL, lo cual es realmente fácil para fines de demostración. Como mencionamos anteriormente, a la aplicación del lado del cliente no le importa cómo se construye el servidor siempre que el servidor acepte consultas y devuelva datos.

Siéntase libre de jugar con él y crear sus propios puntos finales.

El siguiente paso es conectar Apollo y React. Para esto, podemos usar ApolloProvider de react-apollo. Deberíamos envolver todo el componente con ApolloProvider como se muestra a continuación.

import React from 'react'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import Books from './Books'

const client = new ApolloClient({
  uri: 'https://r95kv5p84n.lp.gql.zone/graphql',
})

const App = () => (
  <ApolloProvider client={client}>
    <nav className="navbar">
      <a className="navbar-brand" href="">
        GraphQL in React - Demo application
      </a>
    </nav>
    <div className="container">
      <Books />
    </div>
  </ApolloProvider>
)

export default App

Ahora construyamos la aplicación real. Dado que es una aplicación de demostración, la mantendremos simple y tonta. Obtener los datos y mostrarlos. Vamos a crear un componente llamado Libros para mostrar todos los libros.

import React from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'

import Book from './Book'

const Books = () => (
  <Query
    query={gql`
      {
        allBooks {
          id
          title
          author
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Good things take time....</p>
      if (error) return <p>Something went wrong...</p>

      return <div className="row">{data.allBooks.map(book => <Book book={book} />)}</div>
    }}
  </Query>
)

export default Books

Comenzamos importando los paquetes requeridos. Necesitamos gql para ejecutar la consulta real. Para acceder a los datos, envolvemos el componente real en un componente Query con la consulta gql requerida pasada como atributo de consulta.

El componente de consulta se utiliza para ejecutar una consulta desde el backend. Esto devolverá los datos con tres parámetros.

cargando: para mostrar que los datos aún se están cargando
error: para indicar que se produjo algún error
datos: los datos reales como una matriz (o como se especifica en el backend)

Podemos usar una función de mapa sobre un objeto de datos y simplemente mostrarla en el navegador.

Como se mencionó anteriormente, lo bueno de construir la consulta en su aplicación del lado del cliente es que puede controlar los campos que necesita. Por ejemplo, si solo necesitas el nombre del libro la consulta puede ser:

query={gql`
  {
    allBooks {
      id
      title
    }
  }
`}

Esto proporciona una gran flexibilidad en el caso de puntos finales con una gran cantidad de campos. Solo necesita implementar un único punto final y, en función de la vista, construya la consulta y obtenga los datos necesarios.

Ahora, hemos obtenido con éxito los datos de un servidor graphQL y los hemos mostrado en una aplicación del lado del cliente de reacción.

Si te gusta lo que has leído, sígueme en esto.
Saludos

Similar Posts

Leave a Reply

Your email address will not be published.