Usando Apollo Client

Clase 4 de 16 • Curso de Next.js con GraphQL

Railly Hugo

student•

Para aquellos que les salga el error:

"Invariant Violation: To initialize Apollo Client, you must specify a 'cache' property in the options object."

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: `${baseUrl}/graphql`,
  cache: new InMemoryCache(),
})

Andrés Esteban Rodríguez Jiménez

student•

Usando Apollo Client

Apollo es una librería de GraphQL que nos va a permitir una gran flexibilidad a la hora de crear consultas a nuestra API que soporta GraphQL.

Para realizar estas consultas vamos a instalar el cliente de Apollo:

npm install @apollo/client

Para configurar el cliente de apollo vamos a irnos al **_app.tsx** de nuestro proyecto:

// traemos las dependencias necesarias de Apollo
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
const baseUrl = 'https://api.escuelajs.co'

// tenemos que crear un cliente apollo
const client = new ApolloClient({
  // le pasamos la url de la api graphql
  uri: baseUrl,
  // le mandamos una instancia de "InMemoryCache"
  cache: new InMemoryCache(),
});

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ApolloProvider client={client}> {/* utilizamos el privider de apollo y le pasamos el cliente */}
      <CartProvider>
        <Component {...pageProps} />
      </CartProvider>
    </ApolloProvider>
  )
}

Ahora, para realizar una consulta en otro componente, por ejemplo en el index.tsx debemos hacer lo siguiente:

// importamos al "useQuery" y a "gql" de '@apollo/client'
import { useQuery, gql } from '@apollo/client'

// "gql" nos permite tener un lint de nuestra consulta GraphQL
// esto nos permite visualizar nuestra consulta de un modo más agradable
const query = gql`
  query{
    products{
      id
      title
      price
    }
  }
`

const useAvocados = () => {
  // para realizar una consulta retornamos el "useQuery" y le enviamos la consulta
  return useQuery(query)
}

const HomePage = () => {
  // al momento de ejecutar la consulta "Apollo" nos da distintas variables para evaluar el estatus de la consulta
  // por ejemplo "loading" o "error" que podemos utilizar para validaciónes del estatus de la consulta
  // ejemplo: if (error) throw new Error(`ocurrió un error ${error}`)
	// recordatorio: lo que le solititamos en la constlta está en "data"
  const { data, error, loading } = useAvocados()
  console.log(data ,error, loading)
  return (
    <Layout title="Home">
      {/* ... */}
    </Layout>
  )
}

Como vemos, al utilizar el cliente de Apollo nos evitamos por ejemplo el tener que usar axios, además de que tenemos una lógica de consultas con una experiencia de desarrollo mucho mejor.

Cristian Iñiguez

student•

Se debe instalar esta extensión para tener el resaltado de syntaxis de las queries en JS: https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql-syntax

Francisco Ponce

student•

Ese loading para poner Spinners es simplemente hermoso y el error son simplemente hermosos. Hay otras constantes que nos regresa el hook de useQuery de Apollito como el pollingTime.

¿Ya checaron la docu?

Gabriel Hernández Valdez

student•

Hola tengo una duda, ¿por que cuando trato d pasarle la variable de entorno a la uri la compone primero con localhost/3000 y después con la variable, no he podido hacer que se haga la petición. Ya he copiado directamente hasta el codigo del Repo pero aun así me da ese error.

La única manera fue poniendo la dirección en el código :( , tampoco me parecia reconocer cuando le colocaba /graphql el la uri

Gabriel Hernández Valdez

student•

Después de experimentar un rato y de estar en las siguientes clases, el error estaba en como estaba escrito todo. Para las siguiente clases de cambia el env.local por solo env como nombre del archivo.

Mi archivo env termino asi:

NEXT_PUBLIC_SERVICE_URL = https://platzi-graphql.herokuapp.com

con eso queda ya puedo usar las variables de entorno sin problema

const baseUrl = process.env.NEXT_PUBLIC_SERVICE_URL

const client = new ApolloClient({
  uri: `${baseUrl}/graphql`,
  cache: new InMemoryCache({

Jhunior Eduardo Guevara Lázaro

student•

Gracias, me ya me había sucedido antes pero no me percaté que se debia al archivo env.local, y tiene mucho sentido para poder desarrollar en modo local.

Jose Alberto Reyes Quevedo

student•

Tuve este error con apollo

Module not found: Can't resolve '@apollo/client'

lo resolví instalando la versión exacta del curso que es la 3.5.5

yarn --cwd client add @apollo/client@3.5.5

// traemos las dependencias necesarias de Apollo
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
const baseUrl = 'https://api.escuelajs.co'

// tenemos que crear un cliente apollo
const client = new ApolloClient({
  // le pasamos la url de la api graphql
  uri: baseUrl,
  // le mandamos una instancia de "InMemoryCache"
  cache: new InMemoryCache(),
});

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ApolloProvider client={client}> {/* utilizamos el privider de apollo y le pasamos el cliente */}
      <CartProvider>
        <Component {...pageProps} />
      </CartProvider>
    </ApolloProvider>
  )
}

// importamos al "useQuery" y a "gql" de '@apollo/client'
import { useQuery, gql } from '@apollo/client'

// "gql" nos permite tener un lint de nuestra consulta GraphQL
// esto nos permite visualizar nuestra consulta de un modo más agradable
const query = gql`
  query{
    products{
      id
      title
      price
    }
  }
`

const useAvocados = () => {
  // para realizar una consulta retornamos el "useQuery" y le enviamos la consulta
  return useQuery(query)
}

const HomePage = () => {
  // al momento de ejecutar la consulta "Apollo" nos da distintas variables para evaluar el estatus de la consulta
  // por ejemplo "loading" o "error" que podemos utilizar para validaciónes del estatus de la consulta
  // ejemplo: if (error) throw new Error(`ocurrió un error ${error}`)
	// recordatorio: lo que le solititamos en la constlta está en "data"
  const { data, error, loading } = useAvocados()
  console.log(data ,error, loading)
  return (
    <Layout title="Home">
      {/* ... */}
    </Layout>
  )
}

Usando Apollo Client

Introducción

Arquitectura de nuestro frontend con GraphQL

Consumiendo una API GraphQL con JS puro

Herramientas de GraphQL en el frontend

Usando Axios y React Query

Usando Apollo Client

¿Qué hace diferente a Apollo Client?

#UnderTheHood: Tipos en las respuestas

Auto generación de código

GraphQL y Next.js

#UnderTheHood SSR con GraphQL en Next.js

Conectando páginas y Static Site Generation (SSG)

Autenticación y manejo de sesión

Operaciones con autenticación

Apollo Cache e Incremental Site Generation (ISG)

Próximos pasos

¿Qué quieres aprender? Ideas y retos

Suscripciones

Desventajas de GraphQL en el frontend

Sigue profundizando en Next.js