I have a problem in my useQuery
hook from react-query package. Here I call the API using axios and I’m successfully getting the data (I debugged my app). The problem is when I return the result it’s not saving in the data variable of the useQuery hook. Here is my code:
import React, { useState, useEffect } from 'react'; import './Weather.css'; import axios from "axios"; import { Link } from 'react-router-dom'; import ReactLoading from 'react-loading'; import { useQuery } from 'react-query'; const Weather = () => { const { data, isLoading, error } = useQuery( 'weather', () => { const options = { method: 'GET', url: process.env.REACT_APP_WEATHER_API_URL, params: {q: 'beirut', days: '3'}, headers: { 'x-rapidapi-key': process.env.REACT_APP_WEATHER_RAPID_API_KEY, 'x-rapidapi-host': process.env.REACT_APP_WEATHER_RAPID_API_HOST } }; axios.request(options).then((response) => { console.log(response.data); return response.data; }).catch((error) => { console.error(error); return error; }); } ); if(isLoading) return <ReactLoading className='loader' type='balls' color='white' height={'20%'} width={'20%'} /> if(error) return <div>Error occured</div> return ( <div className="Weather"> {data ? <Link to='/weather' style={{ textDecoration: 'none', color: 'white', margin: '50px' }}> <div className="WeatherData"> <h1>{data.location.name}, {data.location.country}</h1> <div className="CurrentTemp"> <img src={data.current.condition.icon} alt={data.current.condition.text} /> <p>{data.current.condition.text}</p> <p>{data.current.temp_c} °C</p> </div> <p>Updated on: {data.current.last_updated}</p> </div> </Link> : null } </div> ) } export default Weather;
Advertisement
Answer
because this function isn’t returning anything
() => { const options = { method: 'GET', url: process.env.REACT_APP_WEATHER_API_URL, params: {q: 'beirut', days: '3'}, headers: { 'x-rapidapi-key': process.env.REACT_APP_WEATHER_RAPID_API_KEY, 'x-rapidapi-host': process.env.REACT_APP_WEATHER_RAPID_API_HOST } }; axios.request(options).then((response) => { console.log(response.data); return response.data; }).catch((error) => { console.error(error); return error; }); }
useQuery needs an async function or a function that returns a Promise<>
async () => { const options = { method: 'GET', url: process.env.REACT_APP_WEATHER_API_URL, params: {q: 'beirut', days: '3'}, headers: { 'x-rapidapi-key': process.env.REACT_APP_WEATHER_RAPID_API_KEY, 'x-rapidapi-host': process.env.REACT_APP_WEATHER_RAPID_API_HOST } }; const data = await axios.request(options).then((response) => { console.log(response.data); return response.data; }).catch((error) => { console.error(error); return error; }); return data; // we return some data. }