Enlace Patrocinado
Enlace Patrocinado
Este tutorial utiliza una versión anterior de Apollo Client, y estamos trabajando para actualizarlo pronto. Para una introducción más actualizada a la nueva API de constructor, consulte esta guía de inicio . La mayor parte de este tutorial será idéntico y se puede completar con la nueva API.
Sin embargo, a pesar de las grandes ventajas de usar GraphQL, el primer paso puede ser un poco desalentador. Es por eso que comencé a escribir una serie de tutoriales que lo llevan paso a paso a través de la creación de una aplicación React de pila completa con GraphQL y Apollo Client . La serie lo guiará a través del proceso completo de creación de una aplicación de mensajería instantánea que utiliza GraphQL en todo:
- Parte 1 (esta parte): configuración de un cliente simple
- Parte 2: configurar un servidor simple
- Parte 3: escribir mutaciones y mantener al cliente sincronizado
- Parte 4: UI optimista y actualizaciones de la tienda del cliente
- Parte 5: Tipos de entrada y solucionadores de caché personalizados
- Parte 6: suscripciones en el servidor
- Parte 7: suscripciones de GraphQL en el cliente
- Parte 8: Paginación
Este tutorial, el primero de la serie, trata sobre cómo comenzar a usar GraphQL en la interfaz. Solo toma alrededor de 20-30 minutos, y al final tendrá una interfaz de usuario de React muy simple que carga sus datos con GraphQL y se ve así:
¡Empecemos!
1. Configuración
Nota: Para hacer este tutorial, necesitará tener node, npm y git instalados en su máquina, y conocer un poco sobre React.
> npm install -g create-react-app
También clonaremos el repositorio tutorial de GitHub, que tiene algunas CSS e imágenes que usaremos más adelante.
> git clone https://github.com/apollographql/graphql-tutorial.git
> cd graphql-tutorial
A continuación, creamos nuestra aplicación de reacción con
create-react-app .> cliente crear-reaccionar-aplicación
> cliente cd
Para asegurarnos de que funciona, iniciemos nuestro servidor:
> npm start
Si todo funcionó, ahora debería ver lo siguiente en su navegador:
2. Escribir el primer componente
Dado que estamos construyendo una aplicación con Apolo aquí, vamos a cambiar el logotipo y CSS copiando sobre
logo.svg y App.css desde ../resources> cd src
> cp ../../resources/*.
Para mantener breve este tutorial inicial, solo crearemos una vista de lista simple hoy. Cambiemos algunas cosas en
App.js:- Cambie “Bienvenido a reaccionar” a “Bienvenido a Apollo”. Apollo es el nombre del cliente GraphQL que vamos a utilizar a lo largo de esta serie de tutoriales.
- Elimine el párrafo “Para comenzar …” y reemplácelo con un componente React puro que represente una lista desordenada
<ul>con dos elementos de lista<li>, “Canal 1” y “Canal 2” (sí, lo adivinó, vamos a construir Una aplicación de mensajería!). Vamos a nombrar nuestro componente de listaChannelsList.
Ahora
App.js debería verse así:import React, {Component} de 'react';
importar logo de './logo.svg';
import './App.css';const ChannelsList = () =>
(<ul>
<li> Canal 1 </li>
<li> Canal 2 </li>
</ul>); la aplicación de clase extiende el componente {
render () {
return (
<div className = "App">
<div className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h2> Bienvenido a Apollo </h2>
</div>
<ChannelsList />
</div>
);
}
} exportar aplicación predeterminada;
create-react-app configura la recarga en caliente para usted, por lo que tan pronto como guarde el archivo, la ventana del navegador con su aplicación debería actualizarse para reflejar los cambios:3. Escribir su esquema GraphQL
Ahora que tenemos una aplicación simple ejecutándose, es hora de escribir definiciones de tipo GraphQL para ella. El esquema especificará qué tipos de objetos existen en nuestra aplicación y qué campos tienen. Además, también especifica los puntos de entrada permitidos en nuestra API. Lo haremos en un archivo llamado
schema.jsexport const typeDefs = `type Channel {
id: ID! # "!" denota un
nombre de campo obligatorio : Cadena
} # Este tipo especifica los puntos de entrada en nuestra API. En este caso
# solo hay uno - "canales" - que devuelve una lista de canales.
tipo de consulta {
canales: [Canal] # "[]" significa que esta es una lista de canales
}
`;
Con este esquema podremos escribir una consulta simple para obtener los datos de nuestro
ChannelList componente en la siguiente sección. Así se verá nuestra consulta:consulta ChannelsListQuery {
canales {
id
name
}
}
4. Cableado de su componente junto con la consulta GraphQL
Bien, ahora que tenemos nuestro esquema y consulta, ¡solo necesitamos conectar nuestro componente con Apollo Client ! Instalemos Apollo Client y algunos paquetes de ayuda que necesitaremos para obtener GraphQL en nuestra aplicación:
> npm i -S react-apollo
react-apollo es una integración ordenada de Apollo Client con React que le permite decorar sus componentes con un componente de orden superior llamado graphql para obtener sus datos GraphQL en el componente con cero esfuerzo. React Apollo también viene ApolloClient, que es el núcleo de Apollo que maneja todas las actualizaciones de recuperación, almacenamiento en caché y optimismo de datos (las veremos en otro tutorial).Ahora con eso, agreguemos algunas importaciones en la parte superior de nuestro
App.js y creemos una instancia de Apollo Client:importar {
ApolloClient,
gql,
graphql,
ApolloProvider,
} desde 'react-apollo'; const client = new ApolloClient ();
A continuación, decoramos el original
ChannelsList con un componente de orden superior GraphQL que toma la consulta y pasa los datos a nuestro componente:const channelListQuery = gql`
query ChannelsListQuery {
canales { nombre de
identificación } } `; const ChannelsListWithData = graphql (channelListQuery) (ChannelsList);
Cuando se envuelve con el
graphql HOC, nuestro ChannelsList componente recibirá un accesorio llamado data, que contendrá channels cuando esté disponible o error cuando haya un error. Además data también contiene una loading propiedad, que es true cuando Apollo Client todavía está esperando que se recuperen los datos.Modificaremos nuestro
ChannelsList componente para asegurarnos de que el usuario sepa si el componente se está cargando o si ha habido un error:const ChannelsList = ({datos: {cargando, error, canales}}) => {
if (cargando) {
return <p> Cargando ... </p>;
}
if (error) {
return <p> {error.message} </p>;
} return <ul>
{canales.map (ch => <li key = {ch.id}> {ch.name} </li>)}
</ul>;
};
Finalmente, tenemos que reemplazar el
ChannelsList interior de la función de renderizado de nuestra aplicación ChannelsListWithData. Para que una instancia de Apollo Client esté disponible para el componente que acabamos de crear, también incluimos nuestro componente de aplicación de nivel superior ApolloProvider, que coloca una instancia del cliente en la interfaz de usuario.Su
App componente ahora debería verse así:class La aplicación se extiende Componente {
render () {
return (
<ApolloProvider client = {client}>
<div className = "App">
<div className = "App-header">
<img src = {logo} className = "App-logo "alt =" logo "/>
<h2> Bienvenido a Apollo </h2>
</div>
<ChannelsListWithData />
</div>
</ApolloProvider>
);
}
}
Ok, ya casi terminamos! Si intenta ejecutar esto ahora, debería ver el siguiente error:
¿Que esta pasando? Bueno, conectamos todos nuestros componentes correctamente, pero aún no hemos escrito un servidor, por lo que, por supuesto, ¡no hay datos para buscar o mostrar! Si no especifica una URL para su punto final GraphQL, Apollo Client asumirá que se está ejecutando en el mismo origen
/graphql. Para cambiar eso, necesitamos crear una interfaz de red con una URL personalizada.Sin embargo, debido a que este tutorial no se trata de escribir un servidor, usaremos el hecho de que GraphQL se documenta automáticamente para crear simulacros automáticamente a partir de las definiciones de tipo que escribimos anteriormente. Para hacer eso, solo necesitamos detener el servidor, instalar algunos paquetes adicionales y reiniciarlo:
npm i -S graphql-tools apollo-test-utils graphql
Utilizaremos estos paquetes para crear una interfaz de red simulada para Apollo Client basada en el esquema que escribimos anteriormente. Agregue las siguientes importaciones y definiciones hacia la parte superior de
App.js:import {
makeExecutableSchema,
addMockFunctionsToSchema
} desde 'graphql-tools';
importar {mockNetworkInterfaceWithSchema} desde 'apollo-test-utils';
importar {typeDefs} desde './schema';const schema = makeExecutableSchema ({typeDefs});
addMockFunctionsToSchema ({esquema}); const mockNetworkInterface = mockNetworkInterfaceWithSchema ({esquema});
Ahora todo lo que tiene que hacer es pasar el mensaje al
mockNetworkInterface constructor de Apollo Client …cliente const = nuevo ApolloClient ({
networkInterface: mockNetworkInterface,
});
Eso es todo, ya terminaste! Su pantalla ahora debería verse así:
Nota: “Hello World” es solo el texto simulado predeterminado utilizado para las cadenas. Si quieres personalizar tus simulacros para que sean súper elegantes, mira esta publicación que escribí hace un tiempo .
Si algo no funciona y no puede entender por qué, puede compararlo con este archivo para ver qué hizo de manera diferente. Alternativamente, puede consultar la
t1-end rama de Git para inspeccionar algún código de trabajo.¡Felicitaciones, ha terminado oficialmente la primera parte del tutorial! Puede que no parezca mucho, pero en realidad has hecho mucho: has escrito un esquema GraphQL, generado datos simulados a partir de él y lo has conectado a tu componente React con una consulta GraphQL. Sabes que tienes la base sobre la cual vamos a construir una aplicación de mensajería real durante el resto de esta serie de tutoriales. En la parte 2 , escribiremos un servidor simple y lo conectaremos a nuestra aplicación.
Si le gustó este tutorial y desea seguir aprendiendo sobre Apollo y GraphQL, asegúrese de hacer clic en el botón “Seguir” a continuación y síganos en Twitter en @apollographql y @helferjs .