sensitive-blue

isLoading is initially false, so it cause my loading spinner not show up when component mounts.

Is there a way to set isLoading to true initially? So isLoading right now works like this : false => true ( fetching ) => false ( fetched ) I want it to be: true => true ( fetching ) => false ( fetched )

17 Replies

continuing-cyan•3y ago

Hi 👋 Please can you provide a reproduction? It's hard to reason about this without seeing any of your code and/or your use case. A query should usually be in a loading state once mounted as far as I'm aware

sensitive-blueOP•3y ago

  const router = useRouter();
  const { adid } = router.query;
  const {
    data,
    isLoading,
    error,
  } = useQuery("post", () => getData("/post/" + adid, true), {
    enabled: !!adid,
  });

  return ( <div>{isLoading ? <h1>Loading</h1> : <div>{data}</div>}</div>

  const router = useRouter();
  const { adid } = router.query;
  const {
    data,
    isLoading,
    error,
  } = useQuery("post", () => getData("/post/" + adid, true), {
    enabled: !!adid,
  });

  return ( <div>{isLoading ? <h1>Loading</h1> : <div>{data}</div>}</div>

So the

<h1>Loading</h1>

<h1>Loading</h1>

shows up after a second which cause ugly looking user experience. I want it to be visible. This happens cause

isLoading

isLoading

is false for a second when component mounts for some reason.

continuing-cyan•3y ago

What version of TanStack Query/React Query are you using?

sensitive-blueOP•3y ago

latest

continuing-cyan•3y ago

Interesting. I think disabled queries should default to being in a loading state (this is being changed in v5). If you can create a reproduction I can look at this further for you Actually, your query key should be an array as far as I know. Please could you try this as the query key?

["post", adid]

["post", adid]

sensitive-blueOP•3y ago

Yep this fixes that problem but it still fetches when "adid" is undefined.

continuing-cyan•3y ago

Awesome 🚀 Try using the object argument overload

useQuery({ queryKey: ["post", adid], queryFn: () => ..., enabled: adid !== undefined })

useQuery({ queryKey: ["post", adid], queryFn: () => ..., enabled: adid !== undefined })

sensitive-blueOP•3y ago

Ok so now this fixes the problem with adid being undefined but now loading is false again 🥹

continuing-cyan•3y ago

Please provide a reproduction. There's something odd going on that I can't see

sensitive-blueOP•3y ago

I think this happens cause when is "adid" is undefined, use query does not run fetching so isLoading is false. Ok I give me few minutes I found a workaround for this. I have to use isIdle and isLoading together. isIdle is true when isLoading is false. But isIdle is false when data is fetched. So I can use isIdle when isLoading is false because of the dependency being undefined.

continuing-cyan•3y ago

isLoading should be true when a query is disabled in version 4. It's incredibly difficult to say without actually seeing the full picture though

sensitive-blueOP•3y ago

Oh wait For some reason my react query version is ^3.39.2

continuing-cyan•3y ago

That'd explain it

sensitive-blueOP•3y ago

installing react query without specifing version installs v3?

continuing-cyan•3y ago

You're probably installing the old package You should be using @tanstack/react-query, not react-query

sensitive-blueOP•3y ago

Dang, I have to fix this. Thank you so much ❤️

continuing-cyan•3y ago

No worries :reactquery:

Gaming

Programming

isLoading is initially false, so it cause my loading spinner not show up when component mounts.

Did you find this page helpful?