useQuery hook not returning data variable

Question

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;

Answer 1

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.
            }