#response.json() failing only within useQuery - receiving HTML instead of JSON

24 messages · Page 1 of 1 (latest)

inland maple
#

Hi everyone! I'm encountering a strange issue where my API endpoint works perfectly fine outside of useQuery but fails when used within it. I'm using "next": "14.2.5"

What's strange is:

The endpoint works perfectly when called directly or in a normal fetch
Within useQuery, I get a 200 status code
But response.json() fails with: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
Console logs show the token is available and response status is 200

Here's my code:

const { data, isLoading, isError } = useQuery({
    queryKey: ["verifications"],
    queryFn: async () => {
      const response = await fetch(
        `${API_URL}/verifications`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${session?.user?.accessToken}`,
          },
        }
      );
      return response.json();
    },
});
surreal sinew
#

sounds like you're getting an html response, not json

inland maple
#

I don't think so. it returns a valid json inside a server-action, postman...everywhere except when using useQuery

surreal sinew
#

<!DOCTYPE is html, or at the very least xml

#

so whatever's different about how you're making the request in your queryFn is making the endpoint return xml/html not json

#

try logging response.clone().text()

inland maple
#

let me try

#

it's returning html...I'm really confused right now

inland maple
#

the html seems to be coming from ngrok...are you aware if there could be any reason why this is happening?

#

finally found the culprit...pls no one should suffer this kind of bug again.

the solution was to add this to the request header ['ngrok-skip-browser-warning'] = 'skip-browser-warning';

#

I would still like to know why this happened with react-query?

cursive veldt
#

React Query is agnostic so whatever happened isn’t caused by RQ. “Skip warning” sounds like you’re hiding the culprit, not that you found it. Skipping warnings or errors should be a last resort

inland maple
#

don't really know but I strongly believe the issue is related to how RQ was making request to the ngrok backend. not just RQ... tried SWR and encountered the same thing in development.

cursive veldt
#

Having the same issue with something else should be proof it's not RQ's fault. You're getting HTML back when you expect JSON, so what does the HTML say? Is it saying you're unauthenticated? Is it a redirect? Some error response?

inland maple
#

the html is just a ngrok html browser warning.

#

the warning gets triggered whenever RQ/SWR is used...it somehow intercepts the request and send back the warning page

cursive veldt
#

I've never heard of nor used ngrok, but is that a free account warning?

inland maple
#

haven't used it before...my backend team decided to use it for local development

cursive veldt
#

Well if skip warning fixes it then great I guess. Sounds like any browser request would suffer from the same fate, regardless of what invokes it

inland maple
#

none has suffered the same fate in my experience...has been fetching data server-side smoothly both on dev and prod until I decided to do client-side data fetching today using RQ...I nearly pulled my hair

cursive veldt
#

That's my point. Browser aka client suffers. Server side requests are fine

inland maple
#

probably...but didn't happen with just fetch and useEffect...strange

agile locust
#

React Query doesn't fetch data! It just calls the function you provide. If you make the exact same fetch call inside the queryFn as you do inside useEffect, it will behave the same.

inland maple