Usando Axios y React Query

Clase 3 de 16 • Curso de Next.js con GraphQL

Luciano Cavallo

student•

Buenas aquí mi solución al reto:

La query para un solo avo:

const query2 = `
  query Avo($avoId: ID!) {
    avo(id: $avoId) {
      id
      name
      price
      image
      attributes {
        description
        shape
        hardiness
        taste
      }
    }
  }
`

Luego el custom hook quedaría de esta manera:

const useAvocados = () => {
  return useQuery(['avocado', avoId], async () => {
    const response = await requester.post<{ data: TProduct[] }>('/graphql', {
      query: query2,
      variables: { avoId },
    })

    return response.data.data
  })
}

Osea le agregamos al método post de axios, la query nueva, y otro atributo "variables" con un objeto con atributo id de nombre igual al especificado en la query de graphql. Saludos!!!

Andrés Esteban Rodríguez Jiménez

student•

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

student•

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.

Edison Bedoya Garcia

student•

Tener en cuenta que React query ya se actualizo a TanStack query v4 https://tanstack.com/query/v4/docs/overview?from=reactQueryV3&original=https://react-query-v3.tanstack.com/overview

Beto Martinez

student•

Alamadr que buena clase

Luis Miguel Falcon Montaño

student•

Les dejo este recurso del gran Fazt:

https://www.youtube.com/watch?v=6dwgFAODBf8&ab_channel=Fazt

Alessandra Amicarella

student•

Documentacion oficial de Axios y React Query

Diego Reyes Cabrera

student•

¿Es recomendable usar ambas librerías al mismo tiempo? Porque añaden más tamaño al bundle y son más librerías de terceros que no controlamos :/

Hector Ibarra

student•

Podrian actualizar el curso con mejor audio me acuerdo q este proyecto esta desde 2019 y aparte la voz suena como si se hubiera ido de fiesta la noche pasada deberian cuidar esos detalles

Irving Juárez

student•

React Query sigue siendo react query, sin TanStack involved https://react-query-v3.tanstack.com/overview

José Luis Encastin Flores

student•

Si no les funcionan los comandos iniciales, pueden hacer: npm i @tanstack/react-query, para react query y npm i axios. De igual manera, devtools es un paquete independiente, por lo que tienen que hacer npm i @tanstack/react-query-devtools e importarlo de la siguiente manera: import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const query2 = `
  query Avo($avoId: ID!) {
    avo(id: $avoId) {
      id
      name
      price
      image
      attributes {
        description
        shape
        hardiness
        taste
      }
    }
  }
`

const useAvocados = () => {
  return useQuery(['avocado', avoId], async () => {
    const response = await requester.post<{ data: TProduct[] }>('/graphql', {
      query: query2,
      variables: { avoId },
    })

    return response.data.data
  })
}

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

// ...
// 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>
  )
}

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

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