Usando Axios y React Query
Contenido del curso
Usando Axios y React Query
Contenido del curso
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.
Edison Bedoya Garcia
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
Alamadr que buena clase
Luis Miguel Falcon Montaño
Les dejo este recurso del gran Fazt:
Alessandra Amicarella
Documentacion oficial de Axios y React Query
Manrique Matus
Que pasa cuando una llamada se hace desde ssr, como se aplica axios o react query en esos casos?
Diego Reyes Cabrera
¿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
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
React Query sigue siendo react query, sin TanStack involved https://react-query-v3.tanstack.com/overview
José Luis Encastin Flores
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'
