nicolium: call queryClient.setQueryData directly when possible

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/actions/auth.ts

@@ -36,8 +36,6 @@ import { isStandalone } from '@/utils/state';
 
 import { type PlfeResponse, getClient } from '../api';
 
-import { importEntities } from './importer';
-
 import type { AppDispatch, RootState } from '@/store';
 
 const SWITCH_ACCOUNT = 'SWITCH_ACCOUNT' as const;
@@ -180,7 +178,7 @@ const verifyCredentials =
     return client.settings
       .verifyCredentials()
       .then((account) => {
-        dispatch(importEntities({ accounts: [account] }));
+        queryClient.setQueryData(['accounts', account.id], account);
         dispatch<VerifyCredentialsSuccessAction>({
           type: VERIFY_CREDENTIALS_SUCCESS,
           token,
@@ -194,7 +192,7 @@ const verifyCredentials =
           // The user is waitlisted
           const account = error.response.json;
           const parsedAccount = v.parse(credentialAccountSchema, error.response.json);
-          dispatch(importEntities({ accounts: [parsedAccount] }));
+          queryClient.setQueryData(['accounts', parsedAccount.id], parsedAccount);
           dispatch<VerifyCredentialsSuccessAction>({
             type: VERIFY_CREDENTIALS_SUCCESS,
             token,
@@ -219,7 +217,7 @@ interface AuthAccountRememberSuccessAction {
 const rememberAuthAccount =
   (accountUrl: string) => (dispatch: AppDispatch, getState: () => RootState) =>
     KVStore.getItemOrError(`authAccount:${accountUrl}`).then((account) => {
-      dispatch(importEntities({ accounts: [account] }));
+      queryClient.setQueryData(['accounts', account.id], account);
       dispatch<AuthAccountRememberSuccessAction>({
         type: AUTH_ACCOUNT_REMEMBER_SUCCESS,
         account,

packages/pl-fe/src/actions/me.ts

@@ -1,4 +1,5 @@
 import { selectAccount } from '@/queries/accounts/selectors';
+import { queryClient } from '@/queries/client';
 import { setSentryAccount } from '@/sentry';
 import KVStore from '@/storage/kv-store';
 import { useComposeStore } from '@/stores/compose';
@@ -8,7 +9,6 @@ import { getAuthUserId, getAuthUserUrl } from '@/utils/auth';
 import { getClient } from '../api';
 
 import { loadCredentials } from './auth';
-import { importEntities } from './importer';
 import { FE_NAME } from './settings';
 
 import type { AppDispatch, RootState } from '@/store';
@@ -110,7 +110,7 @@ interface MePatchSuccessAction {
 }
 
 const patchMeSuccess = (me: CredentialAccount) => (dispatch: AppDispatch) => {
-  dispatch(importEntities({ accounts: [me] }));
+  queryClient.setQueryData(['accounts', me.id], me);
   useComposeStore.getState().actions.importDefaultSettings(me);
   dispatch<MePatchSuccessAction>({
     type: ME_PATCH_SUCCESS,

packages/pl-fe/src/actions/preload.ts

@@ -1,7 +1,10 @@
 import mapValues from 'lodash/mapValues';
+import { accountSchema } from 'pl-api';
+import * as v from 'valibot';
+
+import { queryClient } from '@/queries/client';
 
 import { verifyCredentials } from './auth';
-import { importEntities } from './importer';
 
 import type { AppDispatch } from '@/store';
 
@@ -57,7 +60,14 @@ const preloadMastodon = (data: Record<string, any>) => (dispatch: AppDispatch) =
   const { me, access_token } = data.meta;
   const { url } = data.accounts[me];
 
-  dispatch(importEntities({ accounts: Object.values(data.accounts) }));
+  for (const account of Object.values(data.accounts)) {
+    try {
+      const parsedAccount = v.parse(accountSchema, account);
+      queryClient.setQueryData(['accounts', parsedAccount.id], parsedAccount);
+    } catch {
+      //
+    }
+  }
   dispatch(verifyCredentials(access_token, url));
   dispatch({ type: MASTODON_PRELOAD_IMPORT, data });
 };

packages/pl-fe/src/api/batcher.ts

@@ -28,10 +28,19 @@ const translations = memoize((lang: string, client: PlApiClient) =>
   }),
 );
 
+const familiarFollowers = memoize((client: PlApiClient) =>
+  create({
+    fetcher: (ids: string[]) => client.accounts.getFamiliarFollowers(ids),
+    resolver: keyResolver('id'),
+    scheduler: bufferScheduler(200),
+  }),
+);
+
 const batcher = {
   relationships,
   groupRelationships,
   translations,
+  familiarFollowers,
 };
 
 export { batcher };

packages/pl-fe/src/queries/accounts/use-birthday-reminders.ts

@@ -1,20 +1,20 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 import { useLoggedIn } from '@/hooks/use-logged-in';
 
 const useBirthdayReminders = (month: number, day: number) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const { isLoggedIn } = useLoggedIn();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['accountsLists', 'birthdayReminders', month, day],
     queryFn: () =>
       client.accounts.getBirthdays(day, month).then((accounts) => {
-        dispatch(importEntities({ accounts }));
+        for (const account of accounts) {
+          queryClient.setQueryData(['accounts', account.id], account);
+        }
 
         return accounts.map(({ id }) => id);
       }),

packages/pl-fe/src/queries/accounts/use-directory.ts

@@ -1,12 +1,10 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 
 const useDirectory = (order: 'active' | 'new', local: boolean = false) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useInfiniteQuery({
     queryKey: ['accountsLists', 'directory', order, local],
@@ -18,7 +16,9 @@ const useDirectory = (order: 'active' | 'new', local: boolean = false) => {
           offset,
         })
         .then((accounts) => {
-          dispatch(importEntities({ accounts }));
+          for (const account of accounts) {
+            queryClient.setQueryData(['accounts', account.id], account);
+          }
           return accounts.map(({ id }) => id);
         }),
     initialPageParam: 0,

packages/pl-fe/src/queries/accounts/use-endorsed-accounts.ts

@@ -1,18 +1,23 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
+import { batcher } from '@/api/batcher';
 import { useClient } from '@/hooks/use-client';
 
 const useEndorsedAccounts = (accountId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['accountsLists', 'endorsedAccounts', accountId],
     queryFn: () =>
       client.accounts.getAccountEndorsements(accountId).then(({ items: accounts }) => {
-        dispatch(importEntities({ accounts }));
+        const fetcher = batcher.relationships(client).fetch;
+
+        for (const account of accounts) {
+          fetcher(account.id);
+          queryClient.setQueryData(['accounts', account.id], account);
+        }
+
         return accounts.map(({ id }) => id);
       }),
   });

packages/pl-fe/src/queries/accounts/use-familiar-followers.ts

@@ -1,27 +1,28 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
+import { batcher } from '@/api/batcher';
 import { useClient } from '@/hooks/use-client';
 import { useFeatures } from '@/hooks/use-features';
 import { useLoggedIn } from '@/hooks/use-logged-in';
 
 const useFamiliarFollowers = (accountId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const features = useFeatures();
   const { isLoggedIn } = useLoggedIn();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['accountsLists', 'familiarFollowers', accountId],
     queryFn: () =>
-      client.accounts.getFamiliarFollowers([accountId]).then((response) => {
-        const result = response.find(({ id }) => id === accountId);
-        if (!result) return [];
-
-        dispatch(importEntities({ accounts: result.accounts }));
-        return result.accounts.map(({ id }) => id);
-      }),
+      batcher
+        .familiarFollowers(client)
+        .fetch(accountId)
+        .then(({ accounts }) => {
+          for (const account of accounts) {
+            queryClient.setQueryData(['accounts', account.id], account);
+          }
+          result.accounts.map(({ id }) => id);
+        }),
     enabled: isLoggedIn && features.familiarFollowers,
   });
 };

packages/pl-fe/src/queries/accounts/use-follow-requests.ts

@@ -1,7 +1,5 @@
-import { useMutation, type InfiniteData } from '@tanstack/react-query';
+import { useMutation, useQueryClient, type InfiniteData } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 import { queryClient } from '@/queries/client';
 import { makePaginatedResponseQuery } from '@/queries/utils/make-paginated-response-query';
@@ -55,28 +53,28 @@ const useOutgoingFollowRequests = makePaginatedResponseQuery(
 
 const useAcceptFollowRequestMutation = (accountId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'followRequests', accountId],
     mutationFn: () => client.myAccount.acceptFollowRequest(accountId),
     onSettled: (relationship) => {
       removeFollowRequest(accountId);
-      dispatch(importEntities({ relationships: [relationship] }));
+      queryClient.setQueryData(['accountRelationships', accountId], relationship);
     },
   });
 };
 
 const useRejectFollowRequestMutation = (accountId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'followRequests', accountId],
     mutationFn: () => client.myAccount.rejectFollowRequest(accountId),
     onSettled: (relationship) => {
       removeFollowRequest(accountId);
-      dispatch(importEntities({ relationships: [relationship] }));
+      queryClient.setQueryData(['accountRelationships', accountId], relationship);
     },
   });
 };

packages/pl-fe/src/queries/admin/use-accounts.ts

@@ -6,8 +6,6 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 import { useOwnAccount } from '@/hooks/use-own-account';
 import { useAccount } from '@/queries/accounts/use-account';
@@ -39,13 +37,13 @@ const useAdminAccounts = makePaginatedResponseQuery(
 
 const useAdminAccount = (accountId?: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   const query = useQuery<AdminAccount>({
     queryKey: ['admin', 'accounts', accountId],
     queryFn: () =>
       client.admin.accounts.getAccount(accountId!).then(({ account, ...adminAccount }) => {
-        dispatch(importEntities({ accounts: [account] }));
+        if (account) queryClient.setQueryData(['accounts', account.id], account);
         return adminAccount as AdminAccount;
       }),
     enabled: !!accountId,
@@ -79,14 +77,13 @@ const usePendingUsersCount = () => {
 
 const useAdminApproveAccountMutation = (accountId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['admin', 'acounts', accountId],
     mutationFn: () => client.admin.accounts.approveAccount(accountId),
     onSuccess: ({ account, ...adminAccount }) => {
-      dispatch(importEntities({ accounts: [account] }));
+      if (account) queryClient.setQueryData(['accounts', account.id], account);
       queryClient.setQueryData(['admin', 'accounts', adminAccount.id], adminAccount);
       queryClient.setQueriesData<InfiniteData<PaginatedResponse<string>>>(
         {

packages/pl-fe/src/queries/chats.ts

@@ -4,6 +4,7 @@ import {
   useInfiniteQuery,
   useMutation,
   useQuery,
+  useQueryClient,
 } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 import {
@@ -14,11 +15,9 @@ import {
 } from 'pl-api';
 import * as v from 'valibot';
 
-import { importEntities } from '@/actions/importer';
 import { batcher } from '@/api/batcher';
 import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context';
 import { useStatContext } from '@/contexts/stat-context';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 import { useFeatures } from '@/hooks/use-features';
 import { useLoggedIn } from '@/hooks/use-logged-in';
@@ -73,7 +72,6 @@ const useChatMessages = (chat: Chat) => {
 
 const useChats = () => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const features = useFeatures();
   const { setUnreadChatsCount } = useStatContext();
   const { me } = useLoggedIn();
@@ -86,10 +84,12 @@ const useChats = () => {
 
     setUnreadChatsCount(sumBy(data, (chat) => chat.unread));
 
-    // Set the relationships to these users in the redux store.
+    // Fetch account relationships
     const fetcher = batcher.relationships(client).fetch;
-    items.map((item) => item.account.id).forEach(fetcher);
-    dispatch(importEntities({ accounts: items.map((item) => item.account) }));
+    for (const { account } of items) {
+      fetcher(account.id);
+      queryClient.setQueryData(['accounts', account.id], account);
+    }
 
     return response;
   };
@@ -117,13 +117,13 @@ const useChats = () => {
 
 const useChat = (chatId?: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   const getChat = async () => {
     if (chatId) {
       const data = await client.chats.getChat(chatId);
 
-      dispatch(importEntities({ accounts: [data.account] }));
+      queryClient.setQueryData(['accounts', data.account.id], data.account);
 
       return data;
     }

packages/pl-fe/src/queries/events/use-event-participation-requests.ts

@@ -1,11 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
 import { useClient } from '@/hooks/use-client';
 import { makePaginatedResponseQuery } from '@/queries/utils/make-paginated-response-query';
 import { minifyList } from '@/queries/utils/minify-list';
 import { updatePaginatedResponse } from '@/queries/utils/update-paginated-response';
-import { store } from '@/store';
+
+import { queryClient } from '../client';
 
 import type { PlApiClient } from 'pl-api';
 
@@ -17,10 +17,11 @@ const minifyRequestList = (
   minifyList(
     response,
     ({ account, participation_message }) => ({ account_id: account.id, participation_message }),
-    (requests) =>
-      store.dispatch(
-        importEntities({ accounts: requests.map((request) => request.account) }) as any,
-      ),
+    (requests) => {
+      for (const { account } of requests) {
+        queryClient.setQueryData(['accounts', account.id], account);
+      }
+    },
   );
 
 type MinifiedRequestList = ReturnType<typeof minifyRequestList>;

packages/pl-fe/src/queries/groups/use-group-members.ts

@@ -1,9 +1,7 @@
-import { type InfiniteData, useMutation } from '@tanstack/react-query';
+import { type InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
 import { useClient } from '@/hooks/use-client';
 import { makePaginatedResponseQuery } from '@/queries/utils/make-paginated-response-query';
-import { store } from '@/store';
 
 import { queryClient } from '../client';
 import { minifyAccountList, minifyList } from '../utils/minify-list';
@@ -32,9 +30,9 @@ const minifyGroupMembersList = (
     response,
     ({ account, ...groupMember }) => ({ ...groupMember, account_id: account.id }),
     (groupMembers) => {
-      store.dispatch(
-        importEntities({ accounts: groupMembers.map(({ account }) => account) }) as any,
-      );
+      for (const { account } of groupMembers) {
+        queryClient.setQueryData(['accounts', account.id], account);
+      }
     },
   );
 
@@ -62,6 +60,7 @@ const useGroupMembershipRequestsQuery = makePaginatedResponseQuery(
 
 const useAcceptGroupMembershipRequestMutation = (groupId: string) => {
   const client = useClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'groupMembershipRequests', groupId],
@@ -78,6 +77,7 @@ const useAcceptGroupMembershipRequestMutation = (groupId: string) => {
 
 const useRejectGroupMembershipRequestMutation = (groupId: string) => {
   const client = useClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'groupMembershipRequests', groupId],
@@ -94,6 +94,7 @@ const useRejectGroupMembershipRequestMutation = (groupId: string) => {
 
 const usePromoteGroupMemberMutation = (groupId: string) => {
   const client = useClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'groupMembers', groupId],
@@ -107,6 +108,7 @@ const usePromoteGroupMemberMutation = (groupId: string) => {
 
 const useDemoteGroupMemberMutation = (groupId: string) => {
   const client = useClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ['accountsLists', 'groupMembers', groupId],

packages/pl-fe/src/queries/search/use-search-accounts.ts

@@ -1,14 +1,12 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 
 import type { SearchAccountParams } from 'pl-api';
 
 const useAccountSearch = (query: string, params?: Omit<SearchAccountParams, 'offset'>) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useInfiniteQuery({
     queryKey: ['search', 'accountSearch', query.trim(), params],
@@ -23,7 +21,9 @@ const useAccountSearch = (query: string, params?: Omit<SearchAccountParams, 'off
           { signal },
         )
         .then((accounts) => {
-          dispatch(importEntities({ accounts }));
+          for (const account of accounts) {
+            queryClient.setQueryData(['accounts', account.id], account);
+          }
           return accounts.map(({ id }) => id);
         }),
     enabled: !!query?.trim(),

packages/pl-fe/src/queries/search/use-search.ts

@@ -1,4 +1,4 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 
 import { importEntities } from '@/actions/importer';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
@@ -11,7 +11,7 @@ const useSearchAccounts = (
   params?: Omit<SearchParams, keyof PaginationParams | 'type' | 'offset'>,
 ) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useInfiniteQuery({
     queryKey: ['search', 'accounts', query, params],
@@ -29,7 +29,12 @@ const useSearchAccounts = (
           { signal },
         )
         .then(({ accounts }) => {
-          dispatch(importEntities({ accounts }));
+          for (const account of accounts) {
+            queryClient.setQueryData(['accounts', account.id], account);
+            if (account.relationship) {
+              queryClient.setQueryData(['accountRelationships', account.id], account.relationship);
+            }
+          }
           return accounts.map(({ id }) => id);
         }),
     enabled: !!query?.trim(),
@@ -110,7 +115,7 @@ const useSearchGroups = (
   params?: Omit<SearchParams, keyof PaginationParams | 'type' | 'offset'>,
 ) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useInfiniteQuery({
     queryKey: ['search', 'groups', query, params],
@@ -127,7 +132,9 @@ const useSearchGroups = (
           { signal },
         )
         .then(({ groups }) => {
-          dispatch(importEntities({ groups }));
+          for (const group of groups) {
+            queryClient.setQueryData(['groups', group.id], group);
+          }
           return groups.map(({ id }) => id);
         }),
     enabled: !!query?.trim(),

packages/pl-fe/src/queries/statuses/use-status-history.ts

@@ -1,8 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { StatusEdit } from 'pl-api';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 
 const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit) => ({
@@ -12,19 +10,18 @@ const minifyStatusEdit = ({ account, ...statusEdit }: StatusEdit) => ({
 
 const useStatusHistory = (statusId: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['statuses', 'history', statusId],
-    queryFn: () =>
-      client.statuses
-        .getStatusHistory(statusId)
-        .then(
-          (history) => (
-            dispatch(importEntities({ accounts: history.map(({ account }) => account) })), history
-          ),
-        )
-        .then((history) => history.map(minifyStatusEdit)),
+    queryFn: async () => {
+      const history = await client.statuses.getStatusHistory(statusId);
+      for (const { account } of history) {
+        // why am i even doing this it's always the same account lol
+        queryClient.setQueryData(['accounts', account.id], account);
+      }
+      return history.map(minifyStatusEdit);
+    },
   });
 };
 

packages/pl-fe/src/queries/statuses/use-status-interactions.ts

@@ -44,13 +44,17 @@ const useStatusReblogs = makeUseStatusInteractions('getRebloggedBy');
 
 const useStatusReactions = (statusId: string, emoji?: string) => {
   const client = useClient();
-  const dispatch = useAppDispatch();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['accountsLists', 'statusReactions', statusId, emoji],
     queryFn: () =>
       client.statuses.getStatusReactions(statusId, emoji).then((reactions) => {
-        dispatch(importEntities({ accounts: reactions.map(({ accounts }) => accounts).flat() }));
+        for (const { accounts } of reactions) {
+          for (const account of accounts) {
+            queryClient.setQueryData(['accounts', account.id], account);
+          }
+        }
 
         return reactions.map(({ accounts, ...reactions }) => reactions);
       }),

packages/pl-fe/src/queries/suggestions.ts

@@ -1,28 +1,29 @@
-import { useMutation, keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useMutation, keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
+import { batcher } from '@/api/batcher';
 import { useClient } from '@/hooks/use-client';
 import { useLoggedIn } from '@/hooks/use-logged-in';
 
 import { removePageItem } from '../utils/queries';
 
-import { useRelationshipsQuery } from './accounts/use-relationship';
-
 const SuggestionKeys = {
   suggestions: ['suggestions'] as const,
 };
 
 const useSuggestions = () => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const { isLoggedIn } = useLoggedIn();
+  const queryClient = useQueryClient();
 
   const getSuggestions = async () => {
     const response = await client.myAccount.getSuggestions();
 
-    const accounts = response.map(({ account }) => account);
-    dispatch(importEntities({ accounts }));
+    const fetcher = batcher.relationships(client).fetch;
+
+    for (const { account } of response) {
+      fetcher(account.id);
+      queryClient.setQueryData(['accounts', account.id], account);
+    }
 
     return response.map(({ account, ...x }) => ({ ...x, account_id: account.id }));
   };
@@ -34,8 +35,6 @@ const useSuggestions = () => {
     enabled: isLoggedIn,
   });
 
-  useRelationshipsQuery(query.data?.map((s) => s.account_id));
-
   return query;
 };
 

packages/pl-fe/src/queries/trends/use-suggested-accounts.ts

@@ -1,7 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import { importEntities } from '@/actions/importer';
-import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { useClient } from '@/hooks/use-client';
 import { useFeatures } from '@/hooks/use-features';
 
@@ -11,14 +9,16 @@ type MinifiedSuggestion = Omit<Suggestion, 'account'> & { account_id: string };
 
 const useSuggestedAccounts = () => {
   const client = useClient();
-  const dispatch = useAppDispatch();
   const features = useFeatures();
+  const queryClient = useQueryClient();
 
   return useQuery({
     queryKey: ['suggestions'],
     queryFn: () =>
       client.myAccount.getSuggestions().then((suggestions) => {
-        dispatch(importEntities({ accounts: suggestions.map(({ account }) => account) }));
+        for (const { account } of suggestions) {
+          queryClient.setQueryData(['accounts', account.id], account);
+        }
         return suggestions.map(
           ({ account, ...suggestion }): MinifiedSuggestion => ({
             account_id: account.id,

packages/pl-fe/src/queries/utils/minify-list.ts

@@ -56,7 +56,12 @@ const minifyAccountList = (response: PaginatedResponse<Account>): PaginatedRespo
     response,
     (account) => account.id,
     (accounts) => {
-      store.dispatch(importEntities({ accounts }) as any);
+      for (const account of accounts) {
+        queryClient.setQueryData(['accounts', account.id], account);
+        if (account.relationship) {
+          queryClient.setQueryData(['accountRelationships', account.id], account.relationship);
+        }
+      }
     },
   );
 
@@ -67,7 +72,12 @@ const minifyBlockedAccountList = (
     response,
     (account) => [account.id, account.block_expires_at],
     (accounts) => {
-      store.dispatch(importEntities({ accounts }) as any);
+      for (const account of accounts) {
+        queryClient.setQueryData(['accounts', account.id], account);
+        if (account.relationship) {
+          queryClient.setQueryData(['accountRelationships', account.id], account.relationship);
+        }
+      }
     },
   );
 
@@ -78,7 +88,12 @@ const minifyMutedAccountList = (
     response,
     (account) => [account.id, account.mute_expires_at],
     (accounts) => {
-      store.dispatch(importEntities({ accounts }) as any);
+      for (const account of accounts) {
+        queryClient.setQueryData(['accounts', account.id], account);
+        if (account.relationship) {
+          queryClient.setQueryData(['accountRelationships', account.id], account.relationship);
+        }
+      }
     },
   );
 
@@ -122,18 +137,13 @@ const minifyGroupedNotifications = (
     (results) => {
       const { accounts, statuses } = results;
 
-      store.dispatch(
-        importEntities({
-          accounts,
-          statuses,
-        }) as any,
-      );
+      store.dispatch(importEntities({ accounts, statuses }) as any);
     },
     false,
   );
 
 const minifyAdminAccount = ({ account, ...adminAccount }: AdminAccount) => {
-  store.dispatch(importEntities({ accounts: [account] }) as any);
+  if (account) queryClient.setQueryData(['accounts', account.id], account);
   queryClient.setQueryData(['admin', 'accounts', adminAccount.id], adminAccount);
 
   return adminAccount;
@@ -144,10 +154,8 @@ const minifyAdminAccountList = (response: PaginatedResponse<AdminAccount>) =>
     response,
     (account) => account.id,
     (accounts) => {
-      store.dispatch(
-        importEntities({ accounts: accounts.map((account) => account.account) }) as any,
-      );
       for (const { account, ...adminAccount } of accounts) {
+        if (account) queryClient.setQueryData(['accounts', account.id], account);
         queryClient.setQueryData(['admin', 'accounts', adminAccount.id], adminAccount);
       }
     },

packages/pl-fe/src/stores/shoutbox.ts

@@ -1,17 +1,12 @@
+import { type PlApiClient, type ShoutMessage as BaseShoutMessage, Account } from 'pl-api';
 import { useEffect } from 'react';
 import { create } from 'zustand';
 import { mutative } from 'zustand-mutative';
 
-import { importEntities } from '@/actions/importer';
 import { useClient } from '@/hooks/use-client';
 import { useFeatures } from '@/hooks/use-features';
 import { useLoggedIn } from '@/hooks/use-logged-in';
-
-import type { store } from '@/store';
-import type { PlApiClient, ShoutMessage as BaseShoutMessage } from 'pl-api';
-
-let lazyStore: typeof store;
-import('@/store').then(({ store }) => (lazyStore = store)).catch(() => {});
+import { queryClient } from '@/queries/client';
 
 const minifyMessage = ({ author, ...message }: BaseShoutMessage) => ({
   author_id: author.id,
@@ -40,19 +35,19 @@ const useShoutboxStore = create<State>()(
       actions: {
         setMessages: (messages) => {
           set((state: State) => {
-            lazyStore?.dispatch(
-              importEntities(
-                { accounts: messages.map((msg) => msg.author) },
-                { override: false },
-              ) as any,
-            );
+            for (const { author } of messages.toReversed()) {
+              queryClient.setQueryData<Account>(
+                ['accounts', author.id],
+                (account) => account || author,
+              );
+            }
             state.messages = messages.map(minifyMessage);
             state.isLoading = false;
           });
         },
         pushMessage: (message) => {
           set((state: State) => {
-            lazyStore?.dispatch(importEntities({ accounts: [message.author] }) as any);
+            queryClient.setQueryData<Account>(['accounts', message.author.id], message.author);
             state.messages.push(minifyMessage(message));
           });
         },