Implementación de Apollo Client

Clase 42 de 45 • Curso de GraphQL 2016

Clase anteriorSiguiente clase

Yeison Daza

student•

Amaría un curso de GraphQL (con Apollo) para frontend, este curso está bastante orientado a backend.

Manejo cache
Estructura de proyecto
Autenticación
Middleware
SSR

Existen muchos temas que pueden ser un curso completo

Carlos Rafael Jimenez Morales

student•

coincido con vos

Sergio David Serrano Garcés

student•

Esperando lo mismo.

Jorge Méndez Ortega

student•

Para este caso ya no se tiene que utilizar apollo-client tienes que utilizar apollo-boost

el codigo que estan utilizando usando apollo-client es

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: '/api',
  }),
});

Al usar apollo-boost queda de la manera siguiente

const client = new ApolloClient({
    uri: "/api",
});```

Iván Gabriel Guerra

student•

Excelente clase! 👌

Julio J Yépez

student•

¡Esta Clase está de lujo!

Jose Chirinos

student•

Para esta implementación crear una app básica de React con:

create-react-app client-graphql

Si usan yarn instalar:
yarn add apollo-client graphql-tag react-apollo

Si usan npm:
npm i -S apollo-client graphql-tag react-apollo

Agregar al package.json

si optaron el puerto 5678 (si cambiaron el port solo lo cambian)

  ...
  "proxy":{
      "api": {
         "target":"http://localhost:5678/graphql"
       }
   }
  ...

Juan Esteban Mejia Ortiz

student•

Increiblemente útil.

Victor Hugo Castro Contreras

student•

Subirás alguna actualización de como usar con la nueva version de “apollo-client@2.0.0” ??
Me está generando muchos errores

Iván Gabriel Guerra

student•

Hola, en este tutorial explico como actualizar Apollo Client a la version 2.0.0.

https://platzi.com/graphql/tutoriales/apollo-client-graphql-actualizar-apollo-client-a-la-version-2xx/

Saludos.

Gustavo Adolfo Ramírez Apache

student•

Tengo problemas con el proxy, como es la nueva forma de difinir esa parte? ya no lo toma desde el package.json sino que estoy usando http-proxy-middleware pero no he podido hacer que sirva

Gerson Montenegro

student•

Hoy día se puede usar el hook useQuery para realizar la consulta al servidor.

Primero se importa el hook

import { useQuery } from 'graphql-hooks';

Luego, se define la consulta como un literal string.

const COURSES_QUERY = `{
  getCursos {
    id
    titulo
  }
}
`

Y dentro del componente se usa el hook:

const { loading, error, data } = useQuery(COURSES_QUERY);

Y finalmente se analiza el resultado para generar los ítems

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  const createItems = () => {
    return data.getCursos.map(item => <div key={item.id}>{item.titulo}</div>);
  };

Jordi Santamaría Portolés

student•

entiendo k con redux, tu harias estas llamadas desde un action, x lo k ahi no tienes ningun componente k conectar y recibir las props, como lo incorporarias entonces?

Sebastian Segura

student•

Hola! Estoy teniendo un problema, al realizar esta consulta en garphiql:

{
  cursos {
    id
    titulo
    profesor{
      id
      nombre
    }
  }
}

me devuelve null en todos los profesores y por lo tanto {props.data.profesor.nombre} no funciona y mi app falla, alguien sabe el motivo? Gracias!

<code>

Diego Forero

Team Platzi•

Sin ver el código que tienes es difícil poder ayudarte. Por favor comparte tu código y revisa si en la consola del servidor arroga algún error al hacer la consulta.

Sebastian Segura

student•

ya lo pude solucionar, agrege profesor.[cursos] al eager de la query cursos.

cursos: () => Curso.query().eager('[profesor, profesor.[cursos], comentarios]'),

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  const createItems = () => {
    return data.getCursos.map(item => <div key={item.id}>{item.titulo}</div>);
  };

Implementación de Apollo Client

Conceptos Generales de GraphQL

Por qué aprender GraphQL

Orígenes de GraphQL

GraphQL vs REST

Construyendo Esquemas a través de Tipos

El Schema - Types

Scalars

Objects

Enum

Interface

Union

Modificadores de tipo

Root Type: Query

Root Type: Mutation

Las Herramientas de GraphQL

Aclaración antes de empezar éste modulo

La Interfaz de GraphiQL

Queries

Argumentos

Variables

Aliases

Fragments

Inline Fragments

Directives

Mutations

Input Types

Proyecto

Presentación del Proyecto

Inicialización del Proyecto

Creación del Esquema

Deprecación de Campos

Resolvers

Desafío: Terminar los Resolvers

Mocking

Implementación de Bases de Datos

Resolviendo a Base de Datos

Modularización del Esquema

Mutaciones: Creando Registros

Mutaciones: Editando Registros

Mutaciones: Eliminando Registros

Desafío: Terminar de Crear las Mutaciones

Implementando la Búsqueda

Manejo de Errores

Usando GraphQl fuera de GraphiQL

Los Clientes de GraphQL: Apollo vs Relay

Implementación de Apollo Client

Conclusiones

¿Cuándo usar GraphQL?

Contenido Bonus

Herramientas de la Comunidad

GraphQL Real Time con Subscriptions