T
TanStack•11mo ago
optimistic-gold

useQuery function stuck on pending status randomly

hey guys, i have this useQuery function that gets data from an api. the function gets stuck on status : pending and fetchStatus : idle even tho it managed to get the data. it happens randomly, meaning sometimes it manages to return the data so im not sure why it happens. using claude ive added some console.logs so he changed the function a bit but nothing changed. 
const selectedTicker = searchParams.get("selected") || "BTCUSD";
const { data: stockData, isPending: stockDataLoading, status, fetchStatus } = useQuery({
    queryKey: ["stockData", selectedTicker],
    queryFn: async () => {
      console.log("Starting fetch for ticker:", selectedTicker);
      const result = await getHistoricalData(selectedTicker);
      console.log("Fetch result:", result);
      return result;
    },
    staleTime: 120 * 1000,
    onError: (error) => console.error('Query error:', error),
    enabled: !!selectedTicker,
  });

export async function getHistoricalData(ticker) {
    const data = await api.get(
      `/stock/historical_data/${ticker}`
    );
    return data.data;
  }
const selectedTicker = searchParams.get("selected") || "BTCUSD";
const { data: stockData, isPending: stockDataLoading, status, fetchStatus } = useQuery({
    queryKey: ["stockData", selectedTicker],
    queryFn: async () => {
      console.log("Starting fetch for ticker:", selectedTicker);
      const result = await getHistoricalData(selectedTicker);
      console.log("Fetch result:", result);
      return result;
    },
    staleTime: 120 * 1000,
    onError: (error) => console.error('Query error:', error),
    enabled: !!selectedTicker,
  });

export async function getHistoricalData(ticker) {
    const data = await api.get(
      `/stock/historical_data/${ticker}`
    );
    return data.data;
  }
did i set the query wrong? heres a link to my stackoverflow post for more information- https://stackoverflow.com/questions/79348931/usequery-ispending-is-stuck-on-true-on-initial-query-in-production
Stack Overflow
useQuery isPending is stuck on true on initial query in production
in my home page (/home) i have a query that fetches data from fmp using api. const { data: stockData, isPending: stockDataLoading } = useQuery({ queryKey: ["stockData", selectedTicker...
2 Replies
fascinating-indigo
fascinating-indigo•11mo ago
Bunch of things that could be going wrong here so I'm gonna make a list: - You could try isLoading instead of isPending (equal to isLoading && isPending) - The tanstack query devtools will allow you to inspect each query and see how it changes - Try getting rid of the staleTime and other default overrides - try using a skipToken instead of enabled : selectedTicker != null ? async () => {...} : skipToken
Devtools | TanStack Query React Docs
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize...
fascinating-indigo
fascinating-indigo•11mo ago
I'd say using the devtools and getting closer to the defaults will get you more information. If you can share a reproduction of your issue in stackblitz/codepen or if your app is open source, I can give more specific answers

Did you find this page helpful?