rocksky.app
A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
Update query cache and invalidate on WS message
Make ws.onmessage async, use functional setQueryData calls, and await
invalidateQueries for feed, now-playings, and scrobblesChart so
consumers receive fresh data after WebSocket updates
tsiry-sandratraina.com
+11
-4
apps/web/src/pages/home/feed/Feed.tsx
+11
-4
apps/web/src/pages/home/feed/Feed.tsx
···
46
46
}, 3000);
47
47
};
48
48
49
-
ws.onmessage = (event) => {
49
+
ws.onmessage = async (event) => {
50
50
if (event.data === "pong") {
51
51
return;
52
52
}
53
53
54
54
const message = JSON.parse(event.data);
55
-
queryClient.setQueryData(["feed"], message.scrobbles);
56
-
queryClient.setQueryData(["now-playings"], message.nowPlayings);
57
-
queryClient.setQueryData(["scrobblesChart"], message.scrobblesChart);
55
+
queryClient.setQueryData(["feed"], () => message.scrobbles);
56
+
queryClient.setQueryData(["now-playings"], () => message.nowPlayings);
57
+
queryClient.setQueryData(
58
+
["scrobblesChart"],
59
+
() => message.scrobblesChart,
60
+
);
61
+
62
+
await queryClient.invalidateQueries({ queryKey: ["feed"] });
63
+
await queryClient.invalidateQueries({ queryKey: ["now-playings"] });
64
+
await queryClient.invalidateQueries({ queryKey: ["scrobblesChart"] });
58
65
};
59
66
60
67
return () => {