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 鈥渧ariables鈥 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鈥