Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

3D
16H
52M
15S

Usando Axios y React Query

3/16
Recursos

Aportes 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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!!!

Documentacion oficial de Axios y React Query

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

Alamadr que buena clase

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’