From 5e4bdc42917151b6a538596d4c851d863e4b35ff Mon Sep 17 00:00:00 2001 From: Maximilian Kaske Date: Sun, 16 Mar 2025 15:10:41 +0700 Subject: [PATCH] chore: blog post --- apps/web/src/content/posts/live-mode-infinite-query.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/src/content/posts/live-mode-infinite-query.mdx b/apps/web/src/content/posts/live-mode-infinite-query.mdx index 75094b4b..5ea35b33 100644 --- a/apps/web/src/content/posts/live-mode-infinite-query.mdx +++ b/apps/web/src/content/posts/live-mode-infinite-query.mdx @@ -12,7 +12,9 @@ tag: engineering This article is part of the [logs.run](https://logs.run) series. -You can enable the live mode right away via [logs.run/i?live=true](https://logs.run/i?live=true). Note that it's a demo; the data is mocked and not persisted. Live mode might take a while to load new data. +You can enable the live mode right away via [logs.run/i?live=true](https://logs.run/i?live=true). + +Note that it's a demo. The data is mocked and not persisted. Live mode might take a while to load new data. While TanStack provides excellent documentation on [Infinite Queries](https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries), this article offers an additional practical example focusing on implementing a live data update. @@ -172,9 +174,11 @@ The `getPreviousPageParam` and `getNextPageParam` functions receive the first an TanStack provides helpful states like `isFetchingNextPage` and `isFetchingPreviousPage` for loading indicators, as well as `hasNextPage` and `hasPreviousPage` to check for available pages - especially useful for as we can hit the end of the load more values. Check out the [`useInfiniteQuery`](https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery) docs for more details. +Both `fetchNextPage` and `fetchPreviousPage` can run independently and in parallel. TanStack Query manages appending and prepending pages to the `data.pages` array accordingly. + ## Implementing Auto-Refresh -While TanStack Query provides a `refetchInterval` option, it would refetch all pages, growing increasingly expensive as more pages are loaded. Additionally, it doesn't reflect the purpose of live mode as instead of refreshing the data, we want to fetch new data. +While TanStack Query provides a `refetchInterval` option, it would refetch all pages, growing increasingly expensive as more pages are loaded. Additionally, it doesn't reflect the purpose of live mode as instead of refreshing the data, we want to fetch newer data. Therefore, we implement a custom refresh mechanism for fetching only new data that you can add to any client component. Here's an simple example implementation of the `LiveModeButton`: -- 2.51.2