Redux batch entity selector optimizations

packages/common/src/audius-query/createApi.ts

@@ -41,7 +41,7 @@ import {
 } from './AudiusQueryContext'
 import { createRequestBatcher } from './createRequestBatcher'
 import { RemoteDataNotFoundError } from './errors'
-import { apiResponseSchema } from './schema'
+import { apiMetadataResponseSchema, apiResponseSchema } from './schema'
 import {
   Api,
   ApiState,
@@ -310,7 +310,26 @@ const createCacheDataSelector =
       endpoint.options.schemaKey ||
       (typeof normalizedData === 'object' && !Array.isArray(normalizedData))
     ) {
-      return denormalize(normalizedData, apiResponseSchema, entityMap) as Data
+      const denormalizedData = denormalize(
+        normalizedData,
+        apiResponseSchema,
+        entityMap
+      )
+
+      if (denormalizedData) {
+        const { entities } = normalize(
+          denormalizedData,
+          apiMetadataResponseSchema
+        )
+        const reDenormalizedData = denormalize(
+          normalizedData,
+          apiResponseSchema,
+          entities
+        ) as Data
+        return reDenormalizedData
+      }
+
+      return denormalizedData
     }
     return normalizedData
   }

packages/common/src/audius-query/schema.ts

@@ -49,3 +49,43 @@ export const schemas = {
 }
 
 export const apiResponseSchema = new schema.Object(schemas)
+
+export const userMetadataSchema = new schema.Object({
+  metadata: userSchema
+})
+
+export const managedUserMetadataSchema = new schema.Object({
+  user: userMetadataSchema
+})
+
+export const accountUserMetadataSchema = new schema.Object({
+  user: userMetadataSchema
+})
+
+export const userManagerMetadataSchema = new schema.Object({
+  manager: userMetadataSchema
+})
+
+export const trackMetadataSchema = new schema.Object({
+  metadata: trackSchema
+})
+
+export const collectionMetadataSchema = new schema.Object({
+  metadata: collectionSchema
+})
+
+export const metadataSchemas = {
+  accountUser: accountUserMetadataSchema,
+  managedUsers: new schema.Array(managedUserMetadataSchema),
+  user: userMetadataSchema,
+  userManagers: new schema.Array(userManagerMetadataSchema),
+  track: trackMetadataSchema,
+  collection: collectionMetadataSchema,
+  users: new schema.Array(userMetadataSchema),
+  tracks: new schema.Array(trackMetadataSchema),
+  collections: new schema.Array(collectionMetadataSchema),
+  albums: new schema.Array(collectionMetadataSchema),
+  playlists: new schema.Array(collectionMetadataSchema)
+}
+
+export const apiMetadataResponseSchema = new schema.Object(metadataSchemas)

packages/common/src/hooks/useGatedContent.ts

@@ -175,8 +175,8 @@ export const useStreamConditionsEntity = (
       ids: [followUserId, tipUserId].filter(removeNullable)
     })
   )
-  const followee = followUserId ? users[followUserId] : null
-  const tippedUser = tipUserId ? users[tipUserId] : null
+  const followee = followUserId ? users[followUserId]?.metadata : null
+  const tippedUser = tipUserId ? users[tipUserId]?.metadata : null
 
   const collectionLink = useMemo(() => {
     if (!nftCollection) return ''

packages/common/src/store/account/selectors.ts

@@ -108,15 +108,15 @@ export const getAccountWithCollections = createSelector(
       ...account,
       collections: [...userPlaylists]
         .map((collection) =>
-          collections[collection.id] &&
-          !collections[collection.id]?._marked_deleted &&
-          !collections[collection.id]?.is_delete &&
+          collections[collection.id]?.metadata &&
+          !collections[collection.id]?.metadata?._marked_deleted &&
+          !collections[collection.id]?.metadata?.is_delete &&
           collection.user.id in users &&
-          !users[collection.user.id].is_deactivated
+          !users[collection.user.id].metadata.is_deactivated
             ? {
-                ...collections[collection.id],
+                ...collections[collection.id].metadata,
                 ownerHandle: collection.user.handle,
-                ownerName: users[collection.user.id].name
+                ownerName: users[collection.user.id].metadata.name
               }
             : null
         )
@@ -153,7 +153,7 @@ export const getUserPlaylists = createSelector(
     // If we haven't cached the collection (e.g. on first load), always return it.
     // If we have cached it and it's marked delete, don't return it bc we know better now.
     return playlists.filter(
-      (p) => !collections[p.id] || !collections[p.id]._marked_deleted
+      (p) => !collections[p.id] || !collections[p.id]?.metadata?._marked_deleted
     )
   }
 )
@@ -164,7 +164,10 @@ export const getAccountCollections = createSelector(
     return Object.keys(accountCollections).reduce(
       (acc, cur) => {
         const track = accountCollections[cur as unknown as number]
-        if (!collections[track.id] || collections[track.id]._marked_deleted)
+        if (
+          !collections[track.id] ||
+          collections[track.id]?.metadata?._marked_deleted
+        )
           return acc
         return {
           ...acc,

packages/common/src/store/cache/collections/selectors.ts

@@ -14,7 +14,7 @@ import { Uid } from '~/utils/uid'
 import type { ID, UID, Collection, User } from '../../../models'
 import { Status, Kind } from '../../../models'
 
-import type { EnhancedCollectionTrack } from './types'
+import type { BatchCachedCollections, EnhancedCollectionTrack } from './types'
 
 /** @deprecated Use useCollection instead */
 export const getCollection = (
@@ -41,30 +41,32 @@ export const getCollections = (
     uids?: UID[] | null
     permalinks?: string[] | null
   }
-) => {
+): { [id: number]: BatchCachedCollections } => {
   if (props && props.ids) {
-    const collections: { [id: number]: Collection } = {}
+    const collections: {
+      [id: number]: BatchCachedCollections
+    } = {}
     props.ids.forEach((id) => {
       const collection = getCollection(state, { id })
       if (collection) {
-        collections[id] = collection
+        collections[id] = { metadata: collection }
       }
     })
     return collections
   } else if (props && props.uids) {
-    const collections: { [uid: string]: Collection } = {}
+    const collections: { [uid: string]: BatchCachedCollections } = {}
     props.uids.forEach((uid) => {
       const collection = getCollection(state, { uid })
       if (collection) {
-        collections[collection.playlist_id] = collection
+        collections[collection.playlist_id] = { metadata: collection }
       }
     })
     return collections
   } else if (props && props.permalinks) {
-    const collections: { [permalink: string]: Collection } = {}
+    const collections: { [permalink: string]: BatchCachedCollections } = {}
     props.permalinks.forEach((permalink) => {
       const collection = getCollection(state, { permalink })
-      if (collection) collections[permalink] = collection
+      if (collection) collections[permalink] = { metadata: collection }
     })
     return collections
   }
@@ -150,7 +152,7 @@ export const getTracksFromCollection = (
 
   const userIds = Object.keys(tracks)
     .map((id) => {
-      const track = tracks[id as unknown as number]
+      const track = tracks[id as unknown as number].metadata
       if (track?.owner_id) {
         return track.owner_id
       }
@@ -174,9 +176,9 @@ export const getTracksFromCollection = (
         return null
       }
       return {
-        ...tracks[t.track],
+        ...tracks[t.track].metadata,
         uid: trackUid.toString(),
-        user: users[tracks[t.track].owner_id]
+        user: users[tracks[t.track].metadata.owner_id].metadata
       }
     })
     .filter(Boolean) as EnhancedCollectionTrack[]

packages/common/src/store/cache/collections/types.ts

@@ -1,4 +1,12 @@
-import { Track, UID, User, ID, Cache, Collection } from '../../../models'
+import {
+  Track,
+  UID,
+  User,
+  ID,
+  Cache,
+  Collection,
+  Cacheable
+} from '../../../models'
 
 export enum PlaylistOperations {
   ADD_TRACK = 'ADD_TRACK',
@@ -27,3 +35,5 @@ export type EditCollectionValues = Collection & {
   artwork: Image
   tracks?: { metadata: Track }[]
 }
+
+export type BatchCachedCollections = Omit<Cacheable<Collection>, '_timestamp'>

packages/common/src/store/cache/selectors.ts

@@ -1,3 +1,4 @@
+import { Cacheable } from '~/models'
 import { CommonState } from '~/store/commonStore'
 import { Uid } from '~/utils/uid'
 
@@ -86,31 +87,29 @@ export const getEntryTimestamp = (
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.USERS }
-): { [id: string]: User }
+): { [id: string]: Cacheable<User> }
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.COLLECTIONS }
-): { [id: string]: Collection }
+): { [id: string]: Cacheable<Collection> }
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.TRACKS }
-): { [id: string]: Track }
+): { [id: string]: Cacheable<Track> }
 export function getAllEntries(
   state: CommonState,
   props: { kind: Kind.USERS }
-):
-  | { [id: string]: User }
-  | { [id: string]: Track }
-  | { [id: string]: Collection }
+): { [id: string]: Cacheable<User> }
+export function getAllEntries(
+  state: CommonState,
+  props: { kind: Kind.TRACKS }
+): { [id: string]: Cacheable<Track> }
+export function getAllEntries(
+  state: CommonState,
+  props: { kind: Kind.COLLECTIONS }
+): { [id: string]: Cacheable<Collection> }
 export function getAllEntries(state: CommonState, props: { kind: Kind }) {
-  const entries = getCache(state, props).entries
-  return Object.keys(entries).reduce(
-    (acc, id) => {
-      acc[id] = entries[id as unknown as number].metadata
-      return acc
-    },
-    {} as { [id: string]: Track | Collection | User }
-  )
+  return getCache(state, props).entries
 }
 
 export function getCache(

packages/common/src/store/cache/tracks/selectors.ts

@@ -3,6 +3,8 @@ import { CommonState } from '~/store/commonStore'
 
 import { Kind, ID, UID, Status, Track } from '../../../models'
 
+import { BatchCachedTracks } from './types'
+
 /** @deprecated Use useTrack instead */
 export const getTrack = (
   state: CommonState,
@@ -31,30 +33,30 @@ export const getTracks = (
     uids?: UID[] | null
     permalinks?: string[] | null
   }
-) => {
+): { [id: number]: BatchCachedTracks } => {
   if (props && props.ids) {
-    const tracks: { [id: number]: Track } = {}
+    const tracks: { [id: number]: BatchCachedTracks } = {}
     props.ids.forEach((id) => {
       const track = getTrack(state, { id })
       if (track) {
-        tracks[id] = track
+        tracks[id] = { metadata: track }
       }
     })
     return tracks
   } else if (props && props.uids) {
-    const tracks: { [id: number]: Track } = {}
+    const tracks: { [id: number]: BatchCachedTracks } = {}
     props.uids.forEach((uid) => {
       const track = getTrack(state, { uid })
       if (track) {
-        tracks[track.track_id] = track
+        tracks[track.track_id] = { metadata: track }
       }
     })
     return tracks
   } else if (props && props.permalinks) {
-    const tracks: { [permalink: string]: Track } = {}
+    const tracks: { [permalink: string]: BatchCachedTracks } = {}
     props.permalinks.forEach((permalink) => {
       const track = getTrack(state, { permalink })
-      if (track) tracks[permalink] = track
+      if (track) tracks[permalink] = { metadata: track }
     })
     return tracks
   }

packages/common/src/store/cache/tracks/types.ts

@@ -1,5 +1,7 @@
-import { Cache, ID, Track } from '../../../models'
+import { Cache, Cacheable, ID, Track } from '../../../models'
 
 export interface TracksCacheState extends Cache<Track> {
   permalinks: { [permalink: string]: ID }
 }
+
+export type BatchCachedTracks = Omit<Cacheable<Track>, '_timestamp'>

packages/common/src/store/cache/users/selectors.ts

@@ -6,7 +6,9 @@ import {
 import type { CommonState } from '~/store/commonStore'
 
 import { Kind } from '../../../models'
-import type { ID, UID, User } from '../../../models'
+import type { ID, UID } from '../../../models'
+
+import { BatchCachedUsers } from './types'
 
 /** @deprecated use useUser instead */
 export const getUser = (
@@ -36,32 +38,32 @@ export const getUsers = (
     uids?: UID[] | null
     handles?: string[] | null
   }
-) => {
+): { [id: number]: BatchCachedUsers } => {
   if (props && props.ids) {
-    const users: { [id: number]: User } = {}
+    const users: { [id: number]: BatchCachedUsers } = {}
     props.ids.forEach((id) => {
       const user = getUser(state, { id })
       if (user) {
-        users[id] = user
+        users[id] = { metadata: user }
       }
     })
     return users
   } else if (props && props.uids) {
-    const users: { [id: number]: User } = {}
+    const users: { [id: number]: BatchCachedUsers } = {}
     props.uids.forEach((uid) => {
       const user = getUser(state, { uid })
       if (user) {
-        users[user.user_id] = user
+        users[user.user_id] = { metadata: user }
       }
     })
     return users
   } else if (props && props.handles) {
-    const users: { [handle: string]: User } = {}
+    const users: { [handle: string]: BatchCachedUsers } = {}
     props.handles.forEach((handle) => {
       const id = getUserByHandle(state, { handle: handle?.toLowerCase() })
       if (id) {
         const user = getUser(state, { id })
-        if (user) users[handle] = user
+        if (user) users[handle] = { metadata: user }
       }
     })
     return users

packages/common/src/store/cache/users/types.ts

@@ -1,5 +1,7 @@
-import { Cache, User, ID } from '../../../models'
+import { Cache, User, ID, Cacheable } from '../../../models'
 
 export interface UsersCacheState extends Cache<User> {
   handles: { [handle: string]: ID }
 }
+
+export type BatchCachedUsers = Omit<Cacheable<User>, '_timestamp'>