Usando Axios y React Query

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 Axios y React Query

Andrés Esteban Rodríguez Jiménez

Estudiante

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

Estudiante

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.

Usando Axios y React Query

Introducción

Arquitectura de nuestro frontend con GraphQL

Consumiendo una API GraphQL con JS puro

Herramientas de GraphQL en el frontend