CODEWITHSUNDEEP
reactjstanstackreact-query
neil
neil

Reputation: 35

Infinite spinner problem in dependent query using tanstack/react-query

In a react.js(18.2) project. I am using @tanstack/react-query(4.29.15). Facing a problem of infinite spinner loading which is caused by the case of dependent query in react-query.

In the code below, the infinite spinner inside 2nd select is running.

The case here should be , on selection of fire dropdown in field two, True value will set to the fire state , which will make Boolean(fire) value also to true , consequently enable the fetching 2nd query.

import { useQuery } from "react-query";
import axios from "axios";
import { useState } from "react";

const fetchUserByEmail = (email) => {
  return axios.get(`http://localhost:4000/users/${email}`);
};

const fetchCoursesByChannelId = (channelId) => {
  return axios.get(`http://localhost:4000/channels/${channelId}`);
};

export const DependentQueriesPage = ({ email }) => {
  const [fire, setFire] = useState("");
  const [water, setWater] = useState("");

  const { isLoading: isUserLoading, data: user } = useQuery(
    ["user", email],
    () => fetchUserByEmail(email)
  );
  const channelId = user?.data?.channelId;

  const { isLoading: isSubUserLoading, data: courses } = useQuery(
    ["courses", channelId],
    () => fetchCoursesByChannelId(channelId),
    {
      enabled: Boolean(fire),
    }
  );

  return (
    <>
      <div>DependentQueries</div>
      <select onChange={() => setFire("on")}>
        <option>select fire</option>
        <option>one</option>
        <option>oned</option>
      </select>
      { isSubUserLoading ?
        <select onChange={() => setWater("on")}>
        <option>select water</option>
        <option>one</option>
        <option>oned</option>
      </select>
      :
      <p> water spinner ...</p>
      }
    </>
  );
};

Please help me in resolve this issue of infinite spinner

Screenshot of chrome browser

enter image description here

Upvotes: 1

Views: 181

Answers (1)

Scott Mitchell
Scott Mitchell

Reputation: 212

It seems that you are rendering the loading spinner only when isSubUserLoading is set to false, hence it will remain there after the fetch as loading will be false. Change isSubUserLoading ? to !isSubUserLoading ? so that the loading spinner is only returned if isSubUserLoading is true, like this:

return (
    <>
      <div>DependentQueries</div>
      <select onChange={() => setFire("on")}>
        <option>select fire</option>
        <option>one</option>
        <option>oned</option>
      </select>
      { !isSubUserLoading ?
        <select onChange={() => setWater("on")}>
        <option>select water</option>
        <option>one</option>
        <option>oned</option>
      </select>
      :
      <p> water spinner ...</p>
      }
    </>
  );

Upvotes: 0

Related Questions