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

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.

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

Les dejo este recurso del gran Fazt:

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

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’