variable-lime

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

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:

``typescript
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(); }, });

16 Replies

xenial-black•9mo ago

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

variable-limeOP•9mo ago

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

xenial-black•9mo ago

<!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()

variable-limeOP•9mo ago

let me try it's returning html...I'm really confused right now 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?

conscious-sapphire•9mo ago

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

variable-limeOP•9mo ago

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.

conscious-sapphire•9mo ago

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?

variable-limeOP•9mo ago

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

conscious-sapphire•9mo ago

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

variable-limeOP•9mo ago

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

conscious-sapphire•9mo ago

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

variable-limeOP•9mo ago

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

conscious-sapphire•9mo ago

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

variable-limeOP•9mo ago

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

genetic-orange•9mo ago

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.

variable-limeOP•9mo ago

Just confirmed this to be true...the error occurs when fetching data client-side. Thanks for the help🙏 Your assertion was correct, man...thanks for the engagement

Gaming

Programming

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

Did you find this page helpful?