Cómo consumir Github GraphQL usando Relay Modern

Reaccionar / retransmitir / GraphQL

¡Hola! Últimamente he estado haciendo algo realmente asombroso. Estoy estudiando tecnologías de vanguardia. Esta semana encontré una gran compañía llamada entria. Algunos de los mejores desarrolladores de Brasil están trabajando allí. Los chicos trajeron React Conf a Brasil, que es una conferencia increíble sobre React. Usan mucho React / Relay / GraphQL en sus proyectos. Hablando con uno de estos tipos, decidí crear un proyecto simple usando esta pila. Esta publicación refleja lo que aprendí mientras hacía eso.

De todos modos, creé un proyecto usando React / Relay Modern / etc. Si no sabe cómo comenzar con Relay Modern en un proyecto real o si desea saber cómo integrar Relay Modern con Github GraphQL API, amigo mío, está en el lugar correcto.

En este artículo, cubriremos lo siguiente:

  • Paso 1: preparación del proyecto
  • Paso 2: Configuración de retransmisión en el proyecto
  • Paso 3: Mostrar mis seguidores de Github
  • Paso 4: declarar los requisitos de datos
  • Paso 5: conectar todo
Nota: Necesita conocimientos básicos previos en React / Relay / GraphQL para comprender completamente esta publicación. ¡Pero no se preocupe demasiado, intente implementarlo y diviértase! \ o /

1. Preparando el proyecto

Creando la aplicación

El primer paso que hice fue crear el proyecto usando create-react-app, una herramienta simple de línea de comandos que te permite crear aplicaciones React sin ningún gasto de configuración.

# Si es necesario, instale `create-react-app`
npm install -g create-react-app
# Creé una aplicación React llamada `react-relay-modern-github` (y navega hacia ella)
crear-reaccionar-aplicación reaccionar-retransmitir-moderno-github
cd react-relay-modern-github

Servidor

Como estaba usando la API de Github GraphQL, no tuve que crear una desde cero. Puedes consultar aquí.

2. Configuración de retransmisión en el proyecto

Una vez que el proyecto ya está creado, necesito conectarlo con la API de retransmisión en el servidor. Tomé los siguientes pasos para lograr esto:

  1. Se agregaron dependencias de retransmisión
  2. Expulsado de create-react-app para configurar Babel
  3. Se agregó el complemento de retransmisión en la configuración de Babel
  4. Configurado el entorno de retransmisión

Veamos cada paso en detalles.

2.1 Agregar dependencias de retransmisión

Fui a retransmitir un sitio web moderno para verificar qué dependencias tuve que instalar. Básicamente lo que hice fue:

hilo añadir react-relay
hilo añadir compilador de relevo --dev
hilo agregar babel-plugin-relay --dev

2.2 Expulsar crear-reaccionar-aplicación

El proyecto create-react-app oculta todas las configuraciones de herramientas de construcción y proporciona un lugar cómodo para comenzar. Sin embargo, en mi caso, necesitaba hacer algunas configuraciones personalizadas de Babel para que Relay funcionara. Entonces necesitaba expulsar de create-react-app.

En la terminal, utilicé el siguiente comando:

expulsión de hilo

2.3 Agregar el complemento de retransmisión en la configuración de Babel

Después de expulsar el proyecto, tuve que agregar el babel-plugin-relay que instalé en el paso anterior al proceso de compilación. En el package.json agregué el complemento de retransmisión modificando la sección de babel de esta manera:

Esa es la configuración de Babel.

2.4. Configurar el entorno de retransmisión

El entorno de retransmisión agrupa la configuración, el almacenamiento en caché y el manejo de la red que Relay necesita para funcionar.

Un entorno de retransmisión debe instanciarse con dos componentes principales:

  1. Una red que sabe con qué servidor GraphQL puede hablar
  2. Una tienda que se encarga del almacenamiento en caché

Para lograr esto, creé un nuevo archivo en el directorio src llamado createRelayEnvironment.js y le agregué el siguiente código:

Este código ha sido tomado del ejemplo en los documentos y solo fue ligeramente personalizado.

Analicemos rápidamente el código anterior para comprender mejor lo que está sucediendo:

  1. Primero importé los módulos JS necesarios que necesitaba para crear instancias y configurar el entorno.
  2. Aquí ejemplifico la Tienda requerida que almacenará los datos en caché.
  3. Ahora creo una red que conoce mi servidor GraphQL de antes, se instancia con una función que devuelve una promesa de una llamada de red a la API GraphQL, aquí se hace usando fetch.
  4. Puede ver en la línea 8 que estoy usando la cadena para la URL GraphQL de github.
  5. Con la tienda y la red disponibles pude crear una instancia del entorno real.
  6. Por último, necesitaba exportar el entorno desde este módulo.

3. Mostrar mis seguidores de Github

Primero creé un nuevo archivo llamado User.js en el directorio src / components / user que representará a un usuario individual:

Luego, agregué otro archivo en el directorio src / components / users-grid y llamé UsersGrid.js:

Como puede ver, este componente UsersGrid simplemente representa una lista de componentes de Usuario al mapear sobre una matriz de usuarios.

Después de la creación de componentes, tuve que declarar los requisitos de datos para obtener datos del servidor.

4. Declaración de requisitos de datos

La forma de declarar las dependencias de datos junto con los componentes React es mediante el uso de la API FragmentContainer.

La forma principal de declarar requisitos de datos es viacreateFragmentContainer, un componente React de orden superior que permite a los componentes React codificar sus requisitos de datos.

Al igual que el método de representación de un componente React no modifica directamente las vistas nativas, los contenedores de retransmisión no obtienen datos directamente. En cambio, los contenedores declaran una especificación de los datos necesarios para renderizar. La retransmisión garantiza que estos datos estén disponibles antes de la representación.

La función createFragmentContainer es un componente de orden superior que toma dos argumentos:

  1. Un componente React para el que desea declarar algunas dependencias de datos
  2. Dependencias de datos escritas como un fragmento y envoltorio GraphQL usando la función graphq

Entonces, en este punto, creé un nuevo archivo para representar cada contenedor de fragmentos (Relay) relacionado con los dos componentes que agregué antes. Primero creé un nuevo archivo para el componente Usuario llamado User.relay.js:

El componente Usuario necesita acceso al nombre y avatarUrl de un usuario.

Nota: ¡Una cosa importante aquí es que hay una convención de nomenclatura para los fragmentos que creé! Cada fragmento debe nombrarse de acuerdo con el archivo y el accesorio que se inyectará en el componente: _

En mi caso, el archivo se llama User.js y el accesorio en el componente debe llamarse usuario. Así que termino con User_user para el nombre del fragmento.

Hice los mismos pasos con el componente UsersGrid con un archivo llamado UsersGrid.relay.js:

De manera similar al componente Usuario, estoy transfiriendo el componente UsersGrid junto con sus requisitos de datos a createFragmentContainer. UsersGridnecesita acceso a una lista de usuarios. Simplemente solicito que se muestren los primeros 10 usuarios. También es posible implementar un enfoque de paginación adecuado.

Tenga en cuenta que nuevamente sigo la misma convención de nomenclatura y llamé al fragmento UsersGrid_viewer. UsersGrid.js es el nombre del archivo y el visor es el accesorio que espera en el componente.

También estoy reutilizando el fragmento User_user que escribí en User.jsporque UsersGrid está más arriba en el árbol React component (y Relay container), ¡así que es responsable de incluir todos los fragmentos de sus hijos!

Nota: Decidí separar el archivo del componente de la configuración de retransmisión del componente porque era más fácil crear historias de cuentos relacionados solo con el componente en sí y nada más.

5. Cablear todo

Usé el QueryRenderer para conectar todo.

QueryRenderer es la raíz de un árbol de retransmisión. Toma una consulta, recupera los datos y llama a la devolución de llamada de procesamiento con los datos.

Como este tipo es la raíz del árbol Relay, tuve que usarlo en mi componente raíz, que en mi caso era el archivo App.js. Aquí está mi App.js después de agregar QueryRenderer:

Como puede ver en las líneas 11-15, escribí la consulta raíz. Observe cómo estamos usando el fragmento UsersGrid_viewer del componente UsersGrid.

Solo falta un paso. Necesitaba compilar el código GraphQL. Ya instalé el compilador de retransmisión, así que ahora lo usaré.

Obtener el esquema y compilar el código graphQL

Como estamos utilizando la API GraphQL de github, necesitamos obtener acceso al esquema GraphQL completo. Para lograrlo, estoy usando este código para obtener el esquema y crear el archivo que necesitaba:

También cambié el archivo package.json para compilar y ejecutar el código anterior como puedes ver aquí:

Ahora, finalmente, si ejecuta hilo, podrá probar la aplicación.

Nota: debe crear un token github para poder ejecutar la aplicación. Este enlace te muestra cómo hacerlo.

Creo que eso es todo. Puedes consultar lo que he hecho en mi página de Github. Mi humilde ejemplo está aquí. Por favor, déjame saber tus pensamientos.