Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Usando Apollo Client

4/16
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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(),
})

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.

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

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?

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