Full-stack React + GraphQL Tutorial

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.

Pío

GraphQL  es un nuevo lenguaje de consulta y definición de API que  tiene el potencial de convertirse en el nuevo REST . Facilita a los componentes de la interfaz de usuario recuperar datos de forma declarativa sin tener que preocuparse por los detalles de implementación del backend. Debido a que es una abstracción tan poderosa, GraphQL puede acelerar el desarrollo de aplicaciones y hacer que el código sea mucho más fácil de mantener.

• 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

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.

Pío

> npm install -g create-react-app

> git clone https://github.com/apollographql/graphql-tutorial.git
 > cd graphql-tutorial

> cliente crear-reaccionar-aplicación 
> cliente cd

> npm start

2. Escribir el primer componente

> cd src 
> cp ../../resources/*.

1. 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.
2. 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 lista  ChannelsList.

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;

3. Escribir su esquema GraphQL

export 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 
} 
`;

consulta ChannelsListQuery { 
  canales { 
    id 
    name 
  } 
}

4. Cableado de su componente junto con la consulta GraphQL

> npm i -S react-apollo

importar { 
  ApolloClient, 
  gql, 
  graphql, 
  ApolloProvider, 
} desde 'react-apollo'; const client = new ApolloClient ();

const channelListQuery = gql` 
   query ChannelsListQuery { 
     canales {        nombre de 
       identificación      }    } `; const ChannelsListWithData = graphql (channelListQuery) (ChannelsList);

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>; 
};

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> 
     ); 
   } 
}

¡Funciona! – bueno, al menos algo así.

npm i -S graphql-tools apollo-test-utils graphql

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});

cliente const = nuevo ApolloClient ({ 
   networkInterface: mockNetworkInterface, 
});

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 .

Pío

---

---