Openstatus
www.openstatus.dev
chore: blog post
authored by
Maximilian Kaske
and committed by
Maximilian Kaske
5e4bdc42
d15c57fd
+6
-2
+6
-2
apps/web/src/content/posts/live-mode-infinite-query.mdx
+6
-2
apps/web/src/content/posts/live-mode-infinite-query.mdx
···
12
12
13
13
This article is part of the [logs.run](https://logs.run) series.
14
14
15
-
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.
15
+
You can enable the live mode right away via [logs.run/i?live=true](https://logs.run/i?live=true).
16
+
17
+
Note that it's a demo. The data is mocked and not persisted. Live mode might take a while to load new data.
16
18
17
19
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.
18
20
···
172
174
173
175
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.
174
176
177
+
Both `fetchNextPage` and `fetchPreviousPage` can run independently and in parallel. TanStack Query manages appending and prepending pages to the `data.pages` array accordingly.
178
+
175
179
## Implementing Auto-Refresh
176
180
177
-
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.
181
+
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.
178
182
179
183
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`:
180
184