mirror of
https://github.com/austinried/subtracks.git
synced 2026-11-10 23:21:59 +01:00
React Query refactor (#91)
* initial react-query experiments * use queries for item screens send the data we do have over routing to prepopulate (album/playlist) use number for starred because sending Date freaks out react-navigation * add in equiv. song cover art fix * reorg, switch artistview over start mapping song cover art when any are available * refactor useStar to queries fix caching for starred items and album cover art * add hook to reset queries on server change * refactor search to use query * fix song cover art setting * use query for artistInfo * remove last bits of library state * cleanup * use query key factory already fixed one wrong key... * require coverart size * let's try no promise queues on these for now * image cache uses query * perf fix for playlist parsing also use placeholder data so we don't have to deal with staleness * drill that disabled also list controls doesn't need its own songs hook/copy * switch to react-native-blob-util for downloads slightly slower but allows us to use DownloadManager, which backgrounds downloads so they are no longer corrupted when the app suspends * add a fake "top songs" based on artist search then sorted by play count/ratings artistview should load now even if topSongs fails * try not to swap between topSongs/search on refetch set queueContext by song list so the index isn't off if the list changes * add content type validation for file fetching also try to speed up existing file return by limiting fs ops * if the HEAD fails, don't queue the download * clean up params * reimpl clear image cache * precompute contextId prevents wrong "is playing" when any mismatch between queue and list * clear images from all servers use external files dir instead of cache * fix pressable disabled flicker don't retry topsongs on failure try to optimize setqueue and fixcoverart a bit * wait for queries during clear * break out fetchExistingFile from fetchFile allows to tell if file is coming from disk or not only show placeholder/loading spinner if actually fetching image * forgot these wouldn't do anything with objects * remove query cache when switching servers * add content-disposition extension gathering add support for progress hook (needs native support still) * added custom RNBU pkg with progress changes * fully unmount tabs when server changes prevents unwanted requests, gives fresh start on switch fix fixCoverArt not re-rendering in certain cases on search * use serverId from fetch deps * fix lint * update licenses * just use the whole lodash package * make using cache buster optional
This commit is contained in:
austinried
GitHub
@@ -0,0 +1,397 @@
|
||||
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
|
||||
import { Album, AlbumCoverArt, Artist, Playlist, Song, StarrableItemType } from '@app/models/library'
|
||||
import { CollectionById } from '@app/models/state'
|
||||
import queryClient from '@app/queryClient'
|
||||
import { useStore } from '@app/state/store'
|
||||
import { GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
InfiniteData,
|
||||
useInfiniteQuery,
|
||||
UseInfiniteQueryResult,
|
||||
useMutation,
|
||||
useQueries,
|
||||
useQuery,
|
||||
UseQueryResult,
|
||||
} from 'react-query'
|
||||
import {
|
||||
useFetchAlbum,
|
||||
useFetchAlbumList,
|
||||
useFetchArtist,
|
||||
useFetchArtistInfo,
|
||||
useFetchArtists,
|
||||
useFetchArtistTopSongs,
|
||||
useFetchExistingFile,
|
||||
useFetchFile,
|
||||
useFetchPlaylist,
|
||||
useFetchPlaylists,
|
||||
useFetchSearchResults,
|
||||
useFetchSong,
|
||||
useFetchStar,
|
||||
useFetchUnstar,
|
||||
} from './fetch'
|
||||
import qk from './queryKeys'
|
||||
|
||||
export const useQueryArtists = () => useQuery(qk.artists, useFetchArtists())
|
||||
|
||||
export const useQueryArtist = (id: string) => {
|
||||
const fetchArtist = useFetchArtist()
|
||||
|
||||
return useQuery(qk.artist(id), () => fetchArtist(id), {
|
||||
placeholderData: () => {
|
||||
const artist = queryClient.getQueryData<CollectionById<Artist>>(qk.artists)?.byId[id]
|
||||
if (artist) {
|
||||
return { artist, albums: [] }
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useQueryArtistInfo = (id: string) => {
|
||||
const fetchArtistInfo = useFetchArtistInfo()
|
||||
return useQuery(qk.artistInfo(id), () => fetchArtistInfo(id))
|
||||
}
|
||||
|
||||
export const useQueryArtistTopSongs = (artistName?: string) => {
|
||||
const fetchArtistTopSongs = useFetchArtistTopSongs()
|
||||
const query = useQuery(qk.artistTopSongs(artistName || ''), () => fetchArtistTopSongs(artistName as string), {
|
||||
enabled: !!artistName,
|
||||
retry: false,
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
notifyOnChangeProps: ['data', 'isError', 'isFetched', 'isSuccess', 'isFetching'],
|
||||
})
|
||||
|
||||
const querySuccess = query.isFetched && query.isSuccess && query.data && query.data.length > 0
|
||||
|
||||
const fetchSearchResults = useFetchSearchResults()
|
||||
const backupQuery = useQuery(
|
||||
qk.search(artistName || '', 0, 0, 50),
|
||||
() => fetchSearchResults({ query: artistName as string, songCount: 50 }),
|
||||
{
|
||||
enabled: !!artistName && !query.isFetching && !querySuccess,
|
||||
select: data =>
|
||||
// sortBy is a stable sort, so that this doesn't change order arbitrarily and re-render
|
||||
_.sortBy(data.songs, [s => -(s.playCount || 0), s => -(s.averageRating || 0), s => -(s.userRating || 0)]),
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
notifyOnChangeProps: ['data', 'isError'],
|
||||
},
|
||||
)
|
||||
|
||||
return useFixCoverArt(querySuccess ? query : backupQuery)
|
||||
}
|
||||
|
||||
export const useQueryPlaylists = () => useQuery(qk.playlists, useFetchPlaylists())
|
||||
|
||||
export const useQueryPlaylist = (id: string, placeholderPlaylist?: Playlist) => {
|
||||
const fetchPlaylist = useFetchPlaylist()
|
||||
|
||||
const query = useQuery(qk.playlist(id), () => fetchPlaylist(id), {
|
||||
placeholderData: () => {
|
||||
if (placeholderPlaylist) {
|
||||
return { playlist: placeholderPlaylist }
|
||||
}
|
||||
|
||||
const playlist = queryClient.getQueryData<CollectionById<Playlist>>(qk.playlists)?.byId[id]
|
||||
if (playlist) {
|
||||
return { playlist, songs: [] }
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
return useFixCoverArt(query)
|
||||
}
|
||||
|
||||
export const useQueryAlbum = (id: string, placeholderAlbum?: Album) => {
|
||||
const fetchAlbum = useFetchAlbum()
|
||||
|
||||
const query = useQuery(qk.album(id), () => fetchAlbum(id), {
|
||||
placeholderData: (): { album: Album; songs?: Song[] } | undefined =>
|
||||
placeholderAlbum ? { album: placeholderAlbum } : undefined,
|
||||
})
|
||||
|
||||
return useFixCoverArt(query)
|
||||
}
|
||||
|
||||
export const useQueryAlbumList = (type: GetAlbumList2TypeBase, size: number) => {
|
||||
const fetchAlbumList = useFetchAlbumList()
|
||||
|
||||
return useInfiniteQuery(
|
||||
qk.albumList(type, size),
|
||||
async context => {
|
||||
return await fetchAlbumList(size, context.pageParam || 0, type)
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage, allPages) => {
|
||||
if (lastPage.length === 0) {
|
||||
return
|
||||
}
|
||||
return allPages.length * size
|
||||
},
|
||||
cacheTime: 0,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export const useQuerySearchResults = (params: Search3Params) => {
|
||||
const fetchSearchResults = useFetchSearchResults()
|
||||
|
||||
const query = useInfiniteQuery(
|
||||
qk.search(params.query, params.artistCount, params.albumCount, params.songCount),
|
||||
async context => {
|
||||
return await fetchSearchResults({
|
||||
...params,
|
||||
artistOffset: context.pageParam?.artistOffset || 0,
|
||||
albumOffset: context.pageParam?.albumOffset || 0,
|
||||
songOffset: context.pageParam?.songOffset || 0,
|
||||
})
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage, allPages) => {
|
||||
if (lastPage.albums.length + lastPage.artists.length + lastPage.songs.length === 0) {
|
||||
return
|
||||
}
|
||||
return {
|
||||
artistOffset: allPages.reduce((acc, val) => (acc += val.artists.length), 0),
|
||||
albumOffset: allPages.reduce((acc, val) => (acc += val.albums.length), 0),
|
||||
songOffset: allPages.reduce((acc, val) => (acc += val.songs.length), 0),
|
||||
}
|
||||
},
|
||||
cacheTime: 1000 * 60,
|
||||
enabled: !!params.query && params.query.length > 1,
|
||||
},
|
||||
)
|
||||
|
||||
return useFixCoverArt(query)
|
||||
}
|
||||
|
||||
export const useQueryHomeLists = (types: GetAlbumList2TypeBase[], size: number) => {
|
||||
const fetchAlbumList = useFetchAlbumList()
|
||||
|
||||
const listQueries = useQueries(
|
||||
types.map(type => {
|
||||
return {
|
||||
queryKey: qk.albumList(type, size),
|
||||
queryFn: async () => {
|
||||
const albums = await fetchAlbumList(size, 0, type as GetAlbumList2TypeBase)
|
||||
return { type, albums }
|
||||
},
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
return listQueries
|
||||
}
|
||||
|
||||
export const useStar = (id: string, type: StarrableItemType) => {
|
||||
const fetchStar = useFetchStar()
|
||||
const fetchUnstar = useFetchUnstar()
|
||||
const fetchSong = useFetchSong()
|
||||
const fetchAlbum = useFetchAlbum()
|
||||
const fetchArtist = useFetchArtist()
|
||||
|
||||
const query = useQuery(
|
||||
qk.starredItems(id),
|
||||
async () => {
|
||||
switch (type) {
|
||||
case 'album':
|
||||
console.log('fetch album starred', id)
|
||||
return !!(await fetchAlbum(id)).album.starred
|
||||
case 'artist':
|
||||
console.log('fetch artist starred', id)
|
||||
return !!(await fetchArtist(id)).artist.starred
|
||||
default:
|
||||
console.log('fetch song starred', id)
|
||||
return !!(await fetchSong(id)).starred
|
||||
}
|
||||
},
|
||||
{
|
||||
cacheTime: Infinity,
|
||||
staleTime: Infinity,
|
||||
},
|
||||
)
|
||||
|
||||
const toggle = useMutation(
|
||||
() => {
|
||||
const params: StarParams = {
|
||||
id: type === 'song' ? id : undefined,
|
||||
albumId: type === 'album' ? id : undefined,
|
||||
artistId: type === 'artist' ? id : undefined,
|
||||
}
|
||||
return !query.data ? fetchStar(params) : fetchUnstar(params)
|
||||
},
|
||||
{
|
||||
onMutate: () => {
|
||||
queryClient.setQueryData<boolean>(qk.starredItems(id), !query.data)
|
||||
},
|
||||
onSuccess: () => {
|
||||
if (type === 'album') {
|
||||
queryClient.invalidateQueries(qk.albumList('starred'))
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
return { query, toggle }
|
||||
}
|
||||
|
||||
export const useQueryExistingFile = (itemType: CacheItemTypeKey, itemId: string) => {
|
||||
const fetchExistingFile = useFetchExistingFile()
|
||||
|
||||
return useQuery(qk.existingFiles(itemType, itemId), () => fetchExistingFile({ itemType, itemId }), {
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
notifyOnChangeProps: ['data', 'isFetched'],
|
||||
})
|
||||
}
|
||||
|
||||
export const useQueryCoverArtPath = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
|
||||
const fetchFile = useFetchFile()
|
||||
const client = useStore(store => store.client)
|
||||
|
||||
const itemType: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
|
||||
const existing = useQueryExistingFile(itemType, coverArt)
|
||||
|
||||
const query = useQuery(
|
||||
qk.coverArt(coverArt, size),
|
||||
async () => {
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const fromUrl = client.getCoverArtUri({ id: coverArt, size: itemType === 'coverArtThumb' ? '256' : undefined })
|
||||
return await fetchFile({ itemType, itemId: coverArt, fromUrl, expectedContentType: 'image' })
|
||||
},
|
||||
{
|
||||
enabled: existing.isFetched && !existing.data && !!client,
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
},
|
||||
)
|
||||
|
||||
return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
|
||||
}
|
||||
|
||||
export const useQueryArtistArtPath = (artistId: string, size: CacheImageSize = 'thumbnail') => {
|
||||
const fetchFile = useFetchFile()
|
||||
const client = useStore(store => store.client)
|
||||
const { data: artistInfo } = useQueryArtistInfo(artistId)
|
||||
|
||||
const itemType: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
|
||||
const existing = useQueryExistingFile(itemType, artistId)
|
||||
|
||||
const query = useQuery(
|
||||
qk.artistArt(artistId, size),
|
||||
async () => {
|
||||
if (!client || !artistInfo?.smallImageUrl || !artistInfo?.largeImageUrl) {
|
||||
return
|
||||
}
|
||||
|
||||
const fromUrl = itemType === 'artistArtThumb' ? artistInfo.smallImageUrl : artistInfo.largeImageUrl
|
||||
return await fetchFile({ itemType, itemId: artistId, fromUrl, expectedContentType: 'image' })
|
||||
},
|
||||
{
|
||||
enabled:
|
||||
existing.isFetched &&
|
||||
!existing.data &&
|
||||
!!client &&
|
||||
(!!artistInfo?.smallImageUrl || !!artistInfo?.largeImageUrl),
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
},
|
||||
)
|
||||
|
||||
return { ...query, data: existing.data || query.data, isExistingFetching: existing.isFetching }
|
||||
}
|
||||
|
||||
type WithSongs = Song[] | { songs?: Song[] }
|
||||
type InfiniteWithSongs = { songs: Song[] }
|
||||
type AnyDataWithSongs = WithSongs | InfiniteData<InfiniteWithSongs>
|
||||
type AnyQueryWithSongs = UseQueryResult<WithSongs> | UseInfiniteQueryResult<{ songs: Song[] }>
|
||||
|
||||
function getSongs<T extends AnyDataWithSongs>(data: T | undefined): Song[] {
|
||||
if (!data) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
return data
|
||||
}
|
||||
|
||||
if ('pages' in data) {
|
||||
return data.pages.flatMap(p => p.songs)
|
||||
}
|
||||
|
||||
return data.songs || []
|
||||
}
|
||||
|
||||
function setSongCoverArt<T extends AnyQueryWithSongs>(query: T, coverArts: UseQueryResult<AlbumCoverArt>[]): T {
|
||||
if (!query.data) {
|
||||
return query
|
||||
}
|
||||
|
||||
const mapSongCoverArt = (song: Song) => ({
|
||||
...song,
|
||||
coverArt: coverArts.find(c => c.data?.albumId === song.albumId)?.data?.coverArt,
|
||||
})
|
||||
|
||||
if (Array.isArray(query.data)) {
|
||||
return {
|
||||
...query,
|
||||
data: query.data.map(mapSongCoverArt),
|
||||
}
|
||||
}
|
||||
|
||||
if ('pages' in query.data) {
|
||||
return {
|
||||
...query,
|
||||
data: {
|
||||
pages: query.data.pages.map(p => ({
|
||||
...p,
|
||||
songs: p.songs.map(mapSongCoverArt),
|
||||
})),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if (query.data.songs) {
|
||||
return {
|
||||
...query,
|
||||
data: {
|
||||
...query.data,
|
||||
songs: query.data.songs.map(mapSongCoverArt),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
return query
|
||||
}
|
||||
|
||||
// song cover art comes back from the api as a unique id per song even if it all points to the same
|
||||
// album art, which prevents us from caching it once, so we need to use the album's cover art
|
||||
const useFixCoverArt = <T extends AnyQueryWithSongs>(query: T) => {
|
||||
const fetchAlbum = useFetchAlbum()
|
||||
|
||||
const songs = getSongs(query.data)
|
||||
const albumIds = _.uniq((songs || []).map(s => s.albumId).filter((id): id is string => id !== undefined))
|
||||
|
||||
const coverArts = useQueries(
|
||||
albumIds.map(id => ({
|
||||
queryKey: qk.albumCoverArt(id),
|
||||
queryFn: async (): Promise<AlbumCoverArt> => {
|
||||
const res = await fetchAlbum(id)
|
||||
return { albumId: res.album.id, coverArt: res.album.coverArt }
|
||||
},
|
||||
staleTime: Infinity,
|
||||
cacheTime: Infinity,
|
||||
notifyOnChangeProps: ['data', 'isFetched'] as any,
|
||||
})),
|
||||
)
|
||||
|
||||
if (coverArts.every(c => c.isFetched)) {
|
||||
return setSongCoverArt(query, coverArts)
|
||||
}
|
||||
|
||||
return query
|
||||
}
|
||||
Reference in New Issue
Block a user