Usando Axios y React Query

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

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

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’