feat: efficient data query

src/routes/$account.chats.$id.lazy.tsx

@@ -13,7 +13,11 @@ import { useCallback, useRef, useState, useTransition } from "react";
 import { useEffect } from "react";
 import { Virtualizer } from "virtua";
 
-type Payload = {
+type ChatPayload = {
+	events: string[];
+};
+
+type EventPayload = {
 	event: string;
 	sender: string;
 };
@@ -140,7 +144,29 @@ function List() {
 	);
 
 	useEffect(() => {
-		const unlisten = listen<Payload>("event", async (data) => {
+		const unlisten = listen<ChatPayload>(`sync_chat_${id}`, async (data) => {
+			const raw = data.payload.events;
+			const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
+			const chats: NostrEvent[] = await queryClient.getQueryData(["chats", id]);
+
+			if (chats?.length) {
+				const newEvents = [...events, ...chats];
+				const dedup = newEvents.filter(
+					(obj1, i, arr) => arr.findIndex((obj2) => obj2.id === obj1.id) === i,
+				);
+				await queryClient.setQueryData(["chats", id], dedup);
+			} else {
+				await queryClient.setQueryData(["chats", id], events);
+			}
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, []);
+
+	useEffect(() => {
+		const unlisten = listen<EventPayload>("event", async (data) => {
 			const event: NostrEvent = JSON.parse(data.payload.event);
 			const sender = data.payload.sender;
 			const receivers = getReceivers(event.tags);

src/routes/$account.chats.lazy.tsx

@@ -19,6 +19,10 @@ import { message } from "@tauri-apps/plugin-dialog";
 import type { NostrEvent } from "nostr-tools";
 import { useCallback, useEffect, useState, useTransition } from "react";
 
+type ChatPayload = {
+	events: string[];
+};
+
 type EventPayload = {
 	event: string;
 	sender: string;
@@ -95,8 +99,20 @@ function ChatList() {
 	});
 
 	useEffect(() => {
-		const unlisten = listen("synchronized", async () => {
-			await queryClient.refetchQueries({ queryKey: ["chats"] });
+		const unlisten = listen<ChatPayload>("sync_chat", async (data) => {
+			const raw = data.payload.events;
+			const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
+			const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
+
+			if (chats?.length) {
+				const newEvents = [...events, ...chats];
+				const uniqs = [
+					...new Map(newEvents.map((item) => [item.pubkey, item])).values(),
+				];
+				await queryClient.setQueryData(["chats"], uniqs);
+			} else {
+				await queryClient.setQueryData(["chats"], events);
+			}
 		});
 
 		return () => {