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?

o inicia sesi贸n.

Para aquellos que les salga el error:

鈥淚nvariant Violation: To initialize Apollo Client, you must specify a 鈥榗ache鈥 property in the options object.鈥

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

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

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?

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.

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