T
TanStack•15mo ago
manual-pink

Infinite rerenders with preload of 'intent' on data table

Im trying to wrap my head around this problem. I'm noticing the preload of the link component is preventing the page from navigating and causing infinite rerenders on the data table cells. if i turn off pre loading it navigates. If i set a staletime on the query being passed it manually to the query, i still have this problem. Is useSuspenseQuery the problem here, always being called? i am sure this is a skill issue on my end 
export const router = createRouter({
    routeTree,
    context: {
        queryClient,
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
})
export const router = createRouter({
    routeTree,
    context: {
        queryClient,
    },
    defaultPreload: 'intent',
    defaultPreloadStaleTime: 0,
})
function PropertyTable() {
    const { data, isLoading } = useSuspenseQuery(propertyQueries.list())

    const columnHelper = createColumnHelper<(typeof data.data)[number]>()

    const columns = useMemo(
        () => [
            columnHelper.display({
                id: 'openRecord',
                size: 50,
                meta: {
                    sizeIsSet: true,
                    className: 'px-0 border-r border-border',
                },
                cell: ({ row }) => (
                    <Button variant="ghost" size="icon" asChild>
                        <Link to={`/listings/manage/$id`} params={{ id: row.original.id.toString() }} preload="intent">
                            <CircleArrowOutUpRight className="w-4 h-4 text-muted-foreground" />
                        </Link>
                    </Button>
                ),
            }),
        ],
        [columnHelper],
    )
    return <DataTable data={data.data} columns={columns} />
}
function PropertyTable() {
    const { data, isLoading } = useSuspenseQuery(propertyQueries.list())

    const columnHelper = createColumnHelper<(typeof data.data)[number]>()

    const columns = useMemo(
        () => [
            columnHelper.display({
                id: 'openRecord',
                size: 50,
                meta: {
                    sizeIsSet: true,
                    className: 'px-0 border-r border-border',
                },
                cell: ({ row }) => (
                    <Button variant="ghost" size="icon" asChild>
                        <Link to={`/listings/manage/$id`} params={{ id: row.original.id.toString() }} preload="intent">
                            <CircleArrowOutUpRight className="w-4 h-4 text-muted-foreground" />
                        </Link>
                    </Button>
                ),
            }),
        ],
        [columnHelper],
    )
    return <DataTable data={data.data} columns={columns} />
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?