I'm currently learning how to use Redux ToolKit Query with the Open Weather Map API but when I hit the endpoint through my App the request includes localhost and gives me the following response:
"You need to enable JavaScript to run this app." with a 200 status code.
I'm wondering is there a way I can remove the localhost part from the request? Hitting that endpoint without it returns the correct info, so the issue isn't the query or the API_KEY being incorrect.
Request via App : http://localhost:3000/api.openweathermap.org/data/2.5/weather?q=dublin&appid=${API_KEY}
Here is my call to the endpoint:
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const weatherApi = createApi({
reducerPath: 'weatherApi',
baseQuery: fetchBaseQuery({ baseUrl: `api.openweathermap.org/data/2.5` }),
endpoints: (builder) => ({
getWeather: builder.query({
query: city => `/weather?q=${city}&appid=${API_KEY}`,
transformResponse: (response) => response.data,
})
})
})
export const { useGetWeatherQuery } = weatherApi
Here is where I then call useGetWeatherQuery
:
import { useGetWeatherQuery } from '../redux/api/index';
import '../styles/App.css';
function App() {
const { data, error, isLoading, isFetching } = useGetWeatherQuery('dublin')
return (
<div className="App">
<Nav/>
<header className="App-header">
</header>
</div>
);
}
export default App;