forward-apricot

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

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),
  });

TanStack•14mo ago

forward-apricot

useSuspenseInfiniteQuery not working in tanstack start

suspense

suspense

      <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),
  });

useSuspenseInfiniteQuery not working in tanstack start

useSuspenseInfiniteQuery not working in tanstack start

Similar Threads

Similar Threads

Similar Threads