T
TanStack•10mo ago
rare-sapphire

useSuspenseInfiniteQuery not working in tanstack start

Hey guys, I am using tanstack start with tanstack query and I am hitting a weird bug where the loading / refetching state is not working properly. Before opening a github issue I just wanted to double check if this behaviour is expected or not. In my app I have a dashboard with many tiles. I fetch the tiles with the useSuspenseInfiniteQuery. I also have a search bar to let the user filter his dashboard. And I am trying to show a loading spinner whenever the useSuspenseInfiniteQuery is refetching. And this is where the bug is, the useSuspenseInfiniteQuery never returns true when loading / refetching. The suspense boundary is also never being called. And I am not sure if this is expected. I have also attached a video demoing it(notice that the tanstack dev tool is working properly, showing as refetching true whereas the log always shows false). here is the code in case: index.tsx 
      <Suspense fallback={<>loading...</>}>
        <Dashboard />
      </Suspense>
      <Suspense fallback={<>loading...</>}>
        <Dashboard />
      </Suspense>
dashboard.tsx 
export const Dashboard = () => {
  const tiles = useTiles();

  //this will always be false
  console.log(
    tiles.isLoading,
    tiles.isFetching,
    tiles.isRefetching,
    tiles.isPending,
    tiles.status,
  );

  if (!tiles.data.length) {
    return <NoDataText>no data</NoDataText>;
  }

  return...
};
export const Dashboard = () => {
  const tiles = useTiles();

  //this will always be false
  console.log(
    tiles.isLoading,
    tiles.isFetching,
    tiles.isRefetching,
    tiles.isPending,
    tiles.status,
  );

  if (!tiles.data.length) {
    return <NoDataText>no data</NoDataText>;
  }

  return...
};
useTIles 
export const useTiles = () => {
  const search = useSearch({ from: "/dashboard/" });

  return useSuspenseInfiniteQuery(dashboardQueries.tiles(search.name, search.tags));
};
export const useTiles = () => {
  const search = useSearch({ from: "/dashboard/" });

  return useSuspenseInfiniteQuery(dashboardQueries.tiles(search.name, search.tags));
};
tiles 
const tiles = (tileName?: Tile["name"], tileTags?: Array<Tag["name"]>) =>
  infiniteQueryOptions({
    queryKey: ["dashboard", "tiles", tileName, tileTags],
    queryFn: async ({ pageParam }) => {
      return await selectTilesAction({ data: { page: pageParam } });
    },
    initialPageParam: 1,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    select: (tiles) => tiles.pages.flatMap((pages) => pages.tiles),
  });
const tiles = (tileName?: Tile["name"], tileTags?: Array<Tag["name"]>) =>
  infiniteQueryOptions({
    queryKey: ["dashboard", "tiles", tileName, tileTags],
    queryFn: async ({ pageParam }) => {
      return await selectTilesAction({ data: { page: pageParam } });
    },
    initialPageParam: 1,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    select: (tiles) => tiles.pages.flatMap((pages) => pages.tiles),
  });
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?