Openstatus
www.openstatus.dev
chore: blog post
authored by
Maximilian Kaske
and committed by
Maximilian Kaske
d761c1b5
e78ff041
+9
-3
+9
-3
apps/web/src/content/posts/live-mode-infinite-query.mdx
+9
-3
apps/web/src/content/posts/live-mode-infinite-query.mdx
···
10
10
tag: engineering
11
11
---
12
12
13
-
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 live data updates.
13
+
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).
14
+
15
+
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 live data updates.
14
16
15
17
## Basic Concept
16
18
···
26
28
);
27
29
```
28
30
29
-
30
-
31
31
Once we understand the _load more_ (append data) functionality, we can mirror this approach to implement _live mode_ (prepend data).
32
32
33
33
Each query requires two key parameters:
34
34
35
35
1. A `cursor` - a pointer indicating a position in the dataset
36
36
2. A `direction` - specifying whether to fetch data before or after the cursor ("prev" or "next")
37
+
38
+
37
39
38
40
In our implementation, the `cursor` is a timestamp representing the last checked date:
39
41
···
166
168
```
167
169
168
170
We use `setTimeout` with recursion rather than `setInterval` to ensure each refresh only starts after the previous one completes. This prevents multiple simultaneous fetches when network latency exceeds the refresh interval and is a better UX.
171
+
172
+
---
173
+
174
+
Now check it out on [logs.run/i?live=true](https://logs.run/i?live=true).
169
175
170
176
For more details about our data table implementation, check out [The React data-table I always wanted](https://www.openstatus.dev/blog/data-table-redesign).