T
TanStack•3y ago
jolly-crimson

Why the data is not coming and the request is in forever pending mode in the following code sandbox.

https://codesandbox.io/s/charming-margulis-iuwpvf?file=/src/App.js 
import "./styles.css";
import { useQuery } from "@tanstack/react-query";

export default function App() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      fetch(
        "https://api.github.com/repos/tannerlinsley/react-query"
      ).then((res) => res.json())
  });

  console.log({ isLoading, error, data });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>:eyes: {data.subscribers_count}</strong>{" "}
      <strong>:sparkles: {data.stargazers_count}</strong>{" "}
      <strong>:fork_and_knife: {data.forks_count}</strong>
    </div>
  );
}
import "./styles.css";
import { useQuery } from "@tanstack/react-query";

export default function App() {
  const { isLoading, error, data } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      fetch(
        "https://api.github.com/repos/tannerlinsley/react-query"
      ).then((res) => res.json())
  });

  console.log({ isLoading, error, data });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>:eyes: {data.subscribers_count}</strong>{" "}
      <strong>:sparkles: {data.stargazers_count}</strong>{" "}
      <strong>:fork_and_knife: {data.forks_count}</strong>
    </div>
  );
}
the code was taken directly from the react query docs - https://tanstack.com/query/latest/docs/react/overview
CodeSandbox
charming-margulis-iuwpvf - CodeSandbox
charming-margulis-iuwpvf using @tanstack/react-query, react, react-dom, react-scripts
Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation
No description
7 Replies
passive-yellow
passive-yellow•3y ago
That first sandbox link that you pasted seems to work for me. Maybe a temporary issue with the api.github.com endpoint.
No description
jolly-crimson
jolly-crimsonOP•3y ago
@julien , there was no issue with the endpoint. I am not able to figure out why it is happening but let me tell you what I have experienced. here you see in the Network, I switched from no throttling to fast 3G and it works there when I switched back to no throttling, it stopped working. I have two wifi connections, one is 5G (my default one) I changed it to 4G and it started working then I switched it back to 5G again and now I am able to get the data. this is not the only time , I have got this issue. I have got the same issue 3 times before too. I am not really sure what could be the root cause of this issue. can you please guess and give me some ideas? My internet is good because everything works standalone (like axios, fetch) except react-query (with either of them) during that time.
No description
passive-yellow
passive-yellow•3y ago
I'm afraid I'm clueless here. To debug this I would try to add a console.log inside the query function like so: 
queryFn: async () => {
      const res = await fetch(
        "https://api.github.com/repos/tannerlinsley/react-query"
      );
      const data = await res.json();

      console.log('data fetched', data); // <= add this console.log

      return data;
    }
queryFn: async () => {
      const res = await fetch(
        "https://api.github.com/repos/tannerlinsley/react-query"
      );
      const data = await res.json();

      console.log('data fetched', data); // <= add this console.log

      return data;
    }
That'll tell you when the fetching is done. When that happens, isLoading should become false.
xenial-black
xenial-black•3y ago
As another point of reference, the sandbox works as expected for me too.
optimistic-gold
optimistic-gold•3y ago
Are you on macos by any chance? There is a bug in a certain chrome version where navigator.onLine, which we use internally, reports that you are offline even though you are not. Check the fetchStatus of the query. Is it 'paused'?
jolly-crimson
jolly-crimsonOP•3y ago
Yes, I am using MAC and I use chrome as a browser. When I got this issue the very first time, at that time, I console.log fetchStatus and it was saying paused. so this indeed look like a bug in my machine browser. thank you for the RCA. @TkDodo 🔮 @Louis @julien this is what MDN is saying about naviagor.onLine 
In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.
In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.
Wondering if there is any plan to develop additional checks apart from navigator.online to find if internet is available.
optimistic-gold
optimistic-gold•3y ago
the only reliable way is to make a fetch request somewhere and see if it succeeds afaik 😅 you can totally add your own event handler to the onlineManager btw if navigator.onLine isn't good enough

Did you find this page helpful?