Rawg api: getting 404

React
1

I am not getting the rawg movie data showing up.
as per the new React course I am using the baseURL: 'https://api.rawg.io/api'
and then

useEffect(() => {
    apiClient
      .get<FetchGamesResponse>("/games")

in chrome tools I see: (I x’d out my key)
http://localhost:5173/games?baseURL=https://api.rawg.io/api&key=xxxxx

If I go to:
https://api.rawg.io/api/games?key=xxxx it works
https://api.rawg.io/api/games&key=xxxx is 404

Not sure whats going on here. Any help?

1 Like
2

You will need to share your code before someone can show you where the issues are. In this case, you are showing:

localhost_5173/games**?baseURL**=https_api.rawg.io/api&key=xxxxx

That should not be that way. You are somehow passing baseURL as a parameter.

Here are the moving parts:

in apiClient.ts

import axios from "axios";

export default axios.create({
    baseURL: "https://api.rawg.io/api",
    params: {
      key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    },
});

Then, in useData.ts

Your call to ApiClient should look like this.

      ApiClient.get<FetchResponse<T>>(endpoint, {
        signal: controller.signal,
        ...requestConfig,
      })

The second part of the question is regarding this:

api.rawg.io/api/games?key=xxxx it works
api.rawg.io/api/games&key=xxxx is 404

The format for get requests is: url?key1=value&key2=value

after the url is a ? — that means there are query parameters following
Then each parameter is concatenated with an &.

Therefore, your working example is correct. Has the ?. The second example is incorrect because there’s no ? after games.

This leads me to believe you’ve truncated the url that’s not working. And it probably had more stuff in the front. If that’s the case, then perhaps your baseURL was not formatted correctly.

Hard to say exactly. But if you sort through these things, you’ll find the problem. Remember, coding is 20% of the work. Debugging is 80%.

Jerry

3

Hey @Ywapom
I was having the same issue as you and the error in my case was passing the baseURL inside the params object in the api-client.ts file.

export default axios.create({
  baseURL: 'https://api.rawg.io/api',
  params: {
    // I was passing the baseURL here before <<<
    key: '<YOUR_API_KEY>'
  }
})