Entonces, esta es la primera vez que intento usar React Query para obtener datos manualmente, estoy creando una aplicación de pronóstico del tiempo simple y encontré un pequeño "problema":
Lo que quiero es que cuando por alguna razón (por ejemplo, el usuario ingrese algo loco) los datos no estén disponibles, luego muestre el mensaje "No se encontraron resultados".
La cuestión es que la primera vez que se monta el componente, el estado de los datos de React Query no estará definido, por lo que no puedo confiar en eso para mostrar el mensaje Sin resultados, ya que aparecerá incluso cuando alguien acceda por primera vez a la aplicación. .. ¿Alguna idea de cómo puedo mostrar ese mensaje solo cuando los datos no están disponibles?
Aquí está mi código:
import './App.css'; import Form from "./components/Form.jsx"; import { useQuery } from 'react-query'; import { useState } from 'react'; import { fetchData } from './api/httpRequest'; import Card from "./components/Card"; function App() { const [search, setSearch] = useState(""); const { data: info, isFetching, isError, refetch } = useQuery("info", () => fetchData(search), { enabled: false, refetchOnWindowFocus: false, }); console.log(info); return ( <main className="App"> <h1 className="app-title">Weather Forecast App</h1> <Form search={search} setSearch={setSearch} fetch={refetch} /> {isFetching ? "Loading..." : isError ? "Error!" : !info ? "No results" : <Card forecast={info} />} </main> ); } export default App;Estas son las funciones de búsqueda:
import axios from "axios"; const API_WEATHER = "https://api.openweathermap.org/data/2.5/onecall?"; const API_WEATHER_EXCLUDE = "&exclude=minutely,hourly,alerts"; const API_COORDINATES = "http://api.positionstack.com/v1/forward?"; const getCoordinates = async (query) => { try { const response = await axios.get(API_COORDINATES + "access_key=" + process.env.REACT_APP_API_COORDS_KEY + "&query=" + query + "&limit=1"); return response.data.data[0]; } catch (error) { console.log(error); } } export const fetchData = async (query) => { try { const coords = await getCoordinates(query); const response = await axios.get(API_WEATHER + "lat=" + coords.latitude + "&lon=" + coords.longitude + API_WEATHER_EXCLUDE + "&appid=" + process.env.REACT_APP_API_WEATHER_KEY); return response.data; } catch (error) { console.log(error); } }Siempre puede usar el estado de estado (status === 'success') en lugar de isFetching, como se indica en la documentación :
function Todos() { const { status, data, error } = useQuery('todos', fetchTodoList) if (status === 'loading') { return <span>Loading...</span> } if (status === 'error') { return <span>Error: {error.message}</span> } // also status === 'success', but "else" logic works, too return ( <ul> {data.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ) } No estoy seguro de su forma de manejar los datos devueltos en general. Creo que sería mejor verificar los resultados devueltos no con !info porque puede devolver datos JSON con otros datos diversos junto con datos vacíos, por ejemplo.