Usando Apollo Client

Curso de Next.js con GraphQL

Contenido del curso

Introducción

Herramientas de GraphQL en el frontend

GraphQL y Next.js

Próximos pasos

Tomar examen

Usando Apollo Client

Andrés Esteban Rodríguez Jiménez

Estudiante

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.

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