Usando Axios y React Query

Contenido del curso

Introducción

Herramientas de GraphQL en el frontend

GraphQL y Next.js

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:04

Usando Axios y React Query

Curso de Next.js con GraphQL

Clase 3 de 16

Clase 3 / 16

Andrés Esteban Rodríguez Jiménez

Hace 3 años

Usando Axios y React Query

Para empezar a consumir nuestra API de GraphQL, lo primero que debemos hacer es instalar las siguientes librerías:

# dependencioas necesarias
npm install @tanstack/react-query axios

# herramientas de desarrollo
npm install @tanstack/react-query-devtools -D

Ahora en nuestro archivo **_app.tsx** vamos a utilizar el provider global de “React Query”:

import { AppProps } from 'next/app'
import 'semantic-ui-css/semantic.min.css'
import '../globals.css'

// importamos las dependendias de react query
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

// importamos las herramientas de desarrollo
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

import CartProvider from '@store/Cart'

// creamos el cliente
const client = new QueryClient()

// vamos a englobar toda la aplicación con el provider de React Query
const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={client}> {/* nos pide como requisito el cliente que creamos ^ */}
      {/* ... */}

      {/* Para usar las herramientas de desarrollo, las inicializamos como un componente dentro del provider*/}
      {/* la herramienta estará minimizada por defecto "initialIsOpen={false}" */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

export default MyApp

Ahora, en el **index.txs** de nuestro proyecto vamos a importar e implementar estas herramientas:

// ...
// importamos axios
import axios from 'axios'
// importamos una función de react query que nos permite hacer request http
import { useQuery } from '@tanstack/react-query'

// creamos una consulta GraphQL
const query = `
  query{
    products{
      id
      title
      price
    }
  }
`

// traemos la api de nuestras variables de entorno
const baseUrl = 'https://your-api.com'

// creamos el requiest a la api
const request = axios.create({
  baseURL: baseUrl,
  // request de tipo json
  headers: {
    'Content-Type': 'application/json'
  }
})

const useAvocados = () => {
  // retornamos direactamente el hook ("useAvocados" será el hook "useQuery")
  // le enviamos una key única por cada request que le enviaremos en un array
  // también recibe una función
  return useQuery(['avocados'], async () => {
    // le enviamos una consulta de typo post a la api de graphql
    const response = await request.post<{ data: TProduct[] }>('/graphql', { query })
    // retornamos los datos
    return response.data.data
  })
}

const HomePage = () => {
  // traemos los datos para verificar que la consulta fué exitosa
  const { data, status } = useAvocados()
  console.log(data, status);

  return (
    <Layout title="Home">
      {/* ... */}
    </Layout>
  )
}

Y listo, de esta forma podemos hacer consultas desde el Frontend d Next.js con GraphQL.

Josue David

Hace 3 años

como logras seguir el curso, si la API que utiliza el profesor esta caida? Vi que alguien compartio una, pero no es la misma de los avocados.

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

Usando Axios y React Query

Progreso del curso

Introducción

Herramientas de GraphQL en el frontend

GraphQL y Next.js

Próximos pasos

Recursos

Recursos