CODEWITHSUNDEEP
javascriptreact-nativeaxiosexpo
Swystem
Swystem

Reputation: 35

GET request returns Error 404 through Axios, but works in Postman?

I'm developing a mobile app using the GiantBomb API. I'm developing using React Native and Expo. I'm currently working on a screen in the app which takes the unique GUID of a game selected from a list and displays the relevant information. It gets the data it needs through an Axios GET request.

Earlier screens in the app retrieve different data from the API through the same method with no problems, and when putting the same request used in the app into Postman - using the same GUID - I get the data I expect returned.

For some reason, the GET request made through Axios returns a 404 error while the same GET request made through Postman gives me the information I need.

This is the Axios request made in the app:

    axios({
      url: "https://www.giantbomb.com/api/game/"+{gameId}+"/?api_key=[API_KEY]",
      method: 'GET',
    })
      .then(response => {
          setgameData(response.data);
      })
      .catch(err => {
          console.error(err);
      });
  }

I know that the screen that is meant to show the game data has the GUID, because it is displayed on the screen. When the displayed GUID is entered into a Postman request, I get the data I expect.

Why does this happen? How can I fix it?

EDIT: The following is the Axios response the app provides me:

- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\core\settle.js:16:9 in settle
- node_modules\axios\lib\adapters\xhr.js:53:6 in handleLoad
- node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:592:4 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:6 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

3030-16836

Request failed with status code 404
- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\core\settle.js:16:9 in settle
- node_modules\axios\lib\adapters\xhr.js:53:6 in handleLoad
- node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:592:4 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:6 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Upvotes: 0

Views: 809

Answers (1)

Swystem
Swystem

Reputation: 35

As commenters have pointed out (thanks @MinusFour @MasoudTahmasebi @spijs) the problem was a simple syntax mistake involving misplaced {}. Thanks all of you!

Upvotes: 1

Related Questions