Cannot fetch Mega-Garchomp data

[bios3188]

So, I got this react app that fetches data from this API and displays it, and it works fine with every Pokèmon. Yet, when fetching data from "https://pokeapi.co/api/v2/pokemon/10058" (which is mega-garchomp data) my query gets an error status, as the body of the response is not JSON parsable. The actual error is "SyntaxError: Unexpected end of JSON input". What drives me crazy is that this error only occurs when fetching that specific Pokèmon id, altough the fetching procedure is the same for every Pokèmon. Moreover, when putting that same URL on a browser, mega-garchomp JSON is displayed as always, with no errors or issues. I have no idea what may cause this situation

[Naramsim]

Hmm, can you just copy paste the JSON and load it in Node? You should see if that gives you an error or not

[bios3188]

I tried to copy paste that JSON into a js variable, then used JSON.parse() on that variable, and everything works fine, the variable is turned into a js object correctly. I even tried to request the resource with postman: GET request to that URL and it's allright. When using useMutation the query still ends with that error. I don't even know if this happens with ID 10058 only or with other IDs as well, I would need to test all 1025 Pokèmon and all alternative forms to find out but I'd rather avoid this.

[bios3188]

Update: I made some experiments and got new (seemengly useful) information. First of all, I am 100% sure that at "https://pokeapi.co/api/v2/pokemon/10058" stands a completely correct JSON object: I copied it, converted to a js object, pasted it to a JSON error find tool: positive outcome every time.

I am also sure that the problem is that, for some reason, my fetch operation returns an empty response: response.text() returns an empty string, response.json() returns that Syntax Error. I've also controlled the id that I pass to getInfo() function, it's 10058 as expected If it's somehow helpful, here is my code for the request:

Just for info: until yesterday, I used to directly return response.json(), but I changed it now for debugging reasons. Other fetches keep working even with this two-step conversion, 10058 is not working still.

[Naramsim]

I'm closing since it seems an issue on your end

[TheChafoin]

Hi same problem here ! With exactly same pokemon and same URL than @bios3188

param.method = param.method ?? "GET"
      const xhr = new XMLHttpRequest()
      xhr.onload = function () {
        if (this.readyState === 4) {
          if(this.status>= 400) {
            reject(this.response)
          }else{
            try{

              resolve(JSON.parse(this.response))
            }catch(e){
              console.log(url, this.response)
            }
          }
        }
      }
      xhr.open(param.method, url)
      xhr.setRequestHeader("Cache-Control", "public")
      xhr.setRequestHeader("max-age", "604800")
      xhr.setRequestHeader("content-type", "application/json")
      xhr.send()

It's working fine on my browser but when I called the API with fetch method or XHR request it's returning a empty string Same problem in Chrome and Firefox

[jamesheesbeen]

I'm also experiencing blank responses consistently for certain queries - for example, Psyduck in this instance:

Calling the endpoint in my browser works as expected. Adding a query string to the call in my app to bust the cache fixes the issue, so it seems to be cache related. I've disabled both the browser and wrapper's cache but the issue is still occurring.