Usando Apollo Client
Contenido del curso
Usando Apollo Client
Contenido del curso
Railly Hugo
Andrés Esteban Rodríguez Jiménez
Cristian Iñiguez
Francisco Ponce
Gabriel Hernández Valdez
Gabriel Hernández Valdez
Jhunior Eduardo Guevara Lázaro
Jose Alberto Reyes Quevedo
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?
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.
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({
:D
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.
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
