0

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;
Ken White
  • 123,280
  • 14
  • 225
  • 444
groul
  • 119
  • 1
  • 9

0 Answers0