TanStackT
TanStack•2y ago•
11 replies
verbal-lime

I don't know if I'm misunderstanding streaming?

(I'm using next.js 14 app router)

So I'm just trying to experiment around, and I can't really get streaming to work, like Suspsense.
It just never says Loading...

This is my page.tsx:
export default function StreamingTestQuery() {
    const queryClient = getQueryClient();

    void queryClient.prefetchQuery<PlayerCountType[]>({
        queryKey: ["playerCount"],
        queryFn: () => getPlayerCount(),
    });

    return (
        <div>
            <h1>Streaming Test with React Query</h1>
            <HydrationBoundary state={dehydrate(queryClient)}>
                <PostFeedQuery />
            </HydrationBoundary>
        </div>
    );
}


And from what i could understand, this should render instantly, since there's no async work, and the promise gets put into the QueryCache. But it dosen't render instantly.

This is PostFeedQuery.tsx:
const PostFeed: FC<PostFeedProps> = ({}) => {
    const { data: playerCount, isLoading } = useSuspenseQuery({
        queryKey: ["playerCount"],
        queryFn: () => getPlayerCount(),
    });

    console.log(isLoading); // Always false
    if (isLoading) {
        return <div>Loading...</div>;
    }
Was this page helpful?