Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Tutorial de React Hooks y GraphQL Apollo: Cree una primera aplicación de ejemplo en 4 sencillos pasos

 En este tutorial, aprenderemos cómo construir una aplicación React en cuatro sencillos pasos con React Hooks y GraphQL Apollo para consumir una API de terceros. aprenderemos a:

  • Configurar un entorno de desarrollo para el desarrollo de React,
  • Inicializar un proyecto de React,
  • Utilice React Hooks,
  • Consume una API GraphQL,
  • Construyendo los paquetes de producción finales para que pueda implementarlos en la nube

Consumiremos una API GraphQL de terceros disponible en esta URL

Construiremos nuestra aplicación en cuatro sencillos y claros pasos de la siguiente manera:

  • Paso 1: configurar un entorno de desarrollo
  • Paso 2: creación de su primer proyecto React
  • Paso 3: consumir y renderizar la API GraphQL
  • Paso 4: creación de la aplicación React

Prerrequisitos

Antes de sumergirnos en los pasos reales, veamos primero los requisitos previos que necesitará tener para seguir este tutorial:

  • Necesitará tener Node.JS y NPM instalados en su máquina,
  • Debe estar familiarizado con las funciones modernas de JavaScript y ES6 +.

Si no tiene Node instalado, puede descargar los instaladores del sitio web oficial o también puede usar NVM , un script bash compatible con POSIX para instalar y administrar múltiples versiones activas de Node en su sistema.

Nota : Puede que esté adelgazando, Node es necesario para crear aplicaciones del lado del servidor, pero aquí estamos creando una aplicación de front-end, ¿por qué la necesitamos? Simplemente porque la mayoría de las bibliotecas de front-end hoy en día tienen herramientas CLI (Interfaces de línea de comandos) para trabajar fácilmente con proyectos como React. Estas herramientas se basan en Node.js. Necesitamos tener Node y NPM para instalar y ejecutar la create-react-appherramienta.

Ahora que hemos visto los requisitos previos de nuestro tutorial, comencemos con el primer paso.

Paso 1: configurar un entorno de desarrollo

En este primer paso, comenzaremos por configurar un entorno de desarrollo para construir nuestra primera aplicación React.

Dado que, como se indica en los requisitos previos, Node y NPM ya deberían estar instalados en su máquina, solo necesitamos instalar la create-react-appherramienta para configurar nuestro entorno de desarrollo.

La create-react-apputilidad es la herramienta oficial para inicializar y trabajar (servir y construir, etc.) con proyectos de React.

Dirígete a una nueva interfaz de línea de comandos y ejecuta el npm installcomando de la siguiente manera:

$ npm install -g create-react-app

Nota: Según su sistema operativo y la configuración de npm, es posible que obtenga errores EACCESS al instalar la herramienta a nivel mundial. En este caso, simplemente puede agregar sudoantes de su comando en Linux y macOS, o usar un símbolo del sistema con derechos de administrador en Windows. También puede simplemente arreglar sus permisos npm .

Como momento de trabajar en este tutorial, se instaló create-react-app v3.1.1 .

Eso es todo por este paso, estamos listos para crear un nuevo proyecto React.

Paso 2: inicializar un nuevo proyecto de React

En el segundo paso, inicializaremos un nuevo proyecto de React.

Dirígete a tu interfaz de línea de comandos y ejecuta el siguiente comando:

$ create-react-app react-graphql-app

Espere a create-react-appque se generen los archivos del proyecto e instale las dependencias requeridas desde npm y luego ejecute los siguientes comandos para servir la aplicación localmente usando un servidor de desarrollo:

$ cd react-graphql-app
$ npm start

El servidor de desarrollo estará disponible en la http://localhost:3000dirección.

Esta es una captura de pantalla de nuestra aplicación React que se ejecuta dentro de un navegador web:

Ejemplo de React GraphQL

Ahora que hemos inicializado nuestra aplicación React y la hemos servido usando un servidor local que tiene soporte para live-reload, ¡comencemos a codificar!

Paso 3: consumir y renderizar la API GraphQL

En este tercer paso, veremos cómo consumir nuestra API GraphQL usando el cliente Apollo. Pero, ¿qué es el cliente de Apollo?

Es un cliente GraphQL que proporciona muchas características avanzadas, como el almacenamiento en caché inteligente, que lo convierte en una única fuente de verdad para los datos locales y remotos de su aplicación.

Estas son las bibliotecas necesarias para configurar Apollo:

Para configurar Apollo y agregar soporte GraphQL en nuestra aplicación, necesitaremos instalar algunas bibliotecas de npm.

Abra una nueva interfaz de línea de comandos y ejecute los siguientes comandos:

$ npm install graphql --save 
$ npm install graphql-tag --save

$ npm install apollo-client --save 
$ npm install apollo-link-http --save 
$ npm install apollo-cache-inmemory --save 

$ npm install react-apollo --save 

Primero instalamos graphqlque proporciona la implementación GraphQL para JavaScript, luego graphql-tagque proporciona un conjunto de utilidades útiles con las que trabajaremos en nuestra aplicación. A continuación, instalamos el cliente apollo junto con su caché en memoria y los módulos de enlace HTTP, finalmente instalamos los enlaces Apollo para React.

Ahora, usemos el cliente GraphQL en nuestra aplicación.

Abra el src/index.jsarchivo en su proyecto React y agregue las siguientes importaciones:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

Importamos el cliente Apollo, el caché en memoria y los módulos de enlace HTTP.

A continuación, cree la caché en memoria y las instancias de enlace HTTP de la siguiente manera

const inmemoryCache = new InMemoryCache();
const httpLink = new HttpLink({
  uri: 'https://graphql-pokemon.now.sh/'
})

El enlace HTTP nos permite enviar solicitudes HTTP a la API GraphQL.

Finalmente, cree la instancia del cliente Apollo de la siguiente manera:

const apolloClient = new ApolloClient({
  inmemoryCache,
  httpLink
})

Ahora tenemos una instancia del cliente Apollo vinculada a la caché en memoria y las instancias de enlace HTTP.

Lo que queda es conectar el cliente Apollo con nuestro (s) componente (s) React usando ApolloProvider.

Vaya al src/index.jsarchivo e importe de la ApolloProvidersiguiente manera:

import { ApolloProvider } from '@apollo/react-hooks';

A continuación, envuelva el Appcomponente de la ApolloProvidersiguiente manera:

/* [...] */
ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));

Ahora, ¿cómo enviar una consulta GraphQL a la API?

Apollo proporciona un enlace React que facilita la llamada a operaciones GraphQL desde los componentes de la interfaz de usuario.

Vaya al src/App.jsarchivo e importe useQueryy de la gqlsiguiente manera:

import { useQuery } from '@apollo/react-hooks';
import gql from "graphql-tag";

La gqletiqueta le permite envolver consultas GraphQL.

El useQuerygancho expone el error, la carga y las propiedades de los datos de un objeto de resultado.

A continuación, agregue la siguiente consulta GraphQL de ejemplo en el src/App.jsarchivo:

const GRAPHQL_QUERY = gql`
{
    pokemons(first: 100) {
      id
      number
      name,
      image
    }
  }

Esta consulta te permitirá obtener los primeros 100 pokémons con su identificación, número, nombre e imagen.

A continuación, envíe la consulta GraphQL con el useQuerygancho de la siguiente manera:

function App() {
  const { data, loading, error } = useQuery(GRAPHQL_QUERY);

  if (loading) return <p>Still loading..</p>;
  if (error) return <p>There is an error!</p>;

Simplemente desestructuramos el objeto devuelto por el useQuery()gancho para obtener los atributos de datos, carga y error.

Cuando loadingiguales true, es decir, cuando todavía se están recibiendo datos, el Appcomponente rendirá Todavía se está cargando .. .

Si hay un error, el componente se procesará. ¡ Hay un error! .

De lo contrario, tendremos nuestros datos en la variable de datos que podemos representar de la siguiente manera:

  return (
    <React.Fragment>
      <div className="container">

        {data && data.pokemons &&
          data.pokemons.map((pokemon, index) => (

            <div key={index}>

              <img src={pokemon.image} />
              <div>
                <h3>{pokemon.name}</h3>

              </div>
            </div>

          ))}
      </div>
    </React.Fragment>
  );

Eso es todo, hemos configurado el cliente GraphQL en nuestra aplicación y enviado una consulta para obtener datos de nuestra API y luego renderizar los datos en nuestro componente React.

Paso 4: creación de la aplicación React

En este paso final, procederemos a construir nuestra aplicación React.

Simpy a su interfaz de línea de comandos y ejecute el siguiente comando desde la raíz de su proyecto React:

$ npm run build

Esto generará un paquete listo para producción dentro de la buildcarpeta de su proyecto que puede implementar en su servidor en la nube.

Conclusión

Como resumen de nuestro tutorial. Hemos aprendido en cuatro sencillos pasos cómo crear una aplicación React y obtener datos de una API GraphQL y mostrarlos en nuestro componente y luego finalmente construir la aplicación para producción.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas