diff --git a/src/webapp/features/collections/lib/collectionKeys.ts b/src/webapp/features/collections/lib/collectionKeys.ts new file mode 100644 index 00000000..1d57811c --- /dev/null +++ b/src/webapp/features/collections/lib/collectionKeys.ts @@ -0,0 +1,8 @@ +export const collectionKeys = { + all: () => ['collections'] as const, + collection: (id: string) => [...collectionKeys.all(), id] as const, + mine: () => [...collectionKeys.all(), 'mine'] as const, + search: (query: string) => [...collectionKeys.all(), 'search', query], + bySembleUrl: (url: string) => [...collectionKeys.all(), url], + infinite: () => [...collectionKeys.all(), 'infinite'], +}; diff --git a/src/webapp/features/collections/lib/mutations/useCreateCollection.tsx b/src/webapp/features/collections/lib/mutations/useCreateCollection.tsx index 619ef74a..f031d5f8 100644 --- a/src/webapp/features/collections/lib/mutations/useCreateCollection.tsx +++ b/src/webapp/features/collections/lib/mutations/useCreateCollection.tsx @@ -1,5 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { createCollection } from '../dal'; +import { collectionKeys } from '../collectionKeys'; export default function useCreateCollection() { const queryClient = useQueryClient(); @@ -13,7 +14,8 @@ export default function useCreateCollection() { // Do UI related things like redirects or showing toast notifications in mutate callbacks. If the user navigated away from the current screen before the mutation finished, those will purposefully not fire // https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['collections'] }); + queryClient.invalidateQueries({ queryKey: collectionKeys.infinite() }); + queryClient.refetchQueries({ queryKey: collectionKeys.mine() }); }, }); diff --git a/src/webapp/features/collections/lib/mutations/useDeleteCollection.tsx b/src/webapp/features/collections/lib/mutations/useDeleteCollection.tsx index 4112ac4c..ab1165dd 100644 --- a/src/webapp/features/collections/lib/mutations/useDeleteCollection.tsx +++ b/src/webapp/features/collections/lib/mutations/useDeleteCollection.tsx @@ -1,5 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { deleteCollection } from '../dal'; +import { collectionKeys } from '../collectionKeys'; export default function useDeleteCollection() { const queryClient = useQueryClient(); @@ -10,10 +11,7 @@ export default function useDeleteCollection() { }, onSuccess: (data) => { - queryClient.invalidateQueries({ queryKey: ['collections'] }); - queryClient.invalidateQueries({ - queryKey: ['collection', data.collectionId], - }); + queryClient.invalidateQueries({ queryKey: collectionKeys.all() }); }, }); diff --git a/src/webapp/features/collections/lib/mutations/useUpdateCollection.tsx b/src/webapp/features/collections/lib/mutations/useUpdateCollection.tsx index 232aaeb2..e53f2322 100644 --- a/src/webapp/features/collections/lib/mutations/useUpdateCollection.tsx +++ b/src/webapp/features/collections/lib/mutations/useUpdateCollection.tsx @@ -1,5 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { updateCollection } from '../dal'; +import { collectionKeys } from '../collectionKeys'; export default function useUpdateCollection() { const queryClient = useQueryClient(); @@ -14,13 +15,12 @@ export default function useUpdateCollection() { return updateCollection(collection); }, - onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey: ['collections'] }); + onSuccess: (variables) => { queryClient.invalidateQueries({ - queryKey: ['collection', data.collectionId], + queryKey: collectionKeys.collection(variables.rkey), }); queryClient.invalidateQueries({ - queryKey: ['collection', variables.rkey], + queryKey: collectionKeys.all(), }); }, }); diff --git a/src/webapp/features/collections/lib/queries/useCollection.tsx b/src/webapp/features/collections/lib/queries/useCollection.tsx index 5ba300a3..014f344a 100644 --- a/src/webapp/features/collections/lib/queries/useCollection.tsx +++ b/src/webapp/features/collections/lib/queries/useCollection.tsx @@ -1,5 +1,6 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { getCollectionPageByAtUri } from '../dal'; +import { collectionKeys } from '../collectionKeys'; interface Props { rkey: string; @@ -11,7 +12,7 @@ export default function useCollection(props: Props) { const limit = props.limit ?? 20; return useSuspenseInfiniteQuery({ - queryKey: ['collection', props.rkey, props.handle, limit], + queryKey: collectionKeys.collection(props.rkey), initialPageParam: 1, queryFn: ({ pageParam }) => getCollectionPageByAtUri({ diff --git a/src/webapp/features/collections/lib/queries/useCollectionSearch.tsx b/src/webapp/features/collections/lib/queries/useCollectionSearch.tsx index 156f0e48..2aab20bd 100644 --- a/src/webapp/features/collections/lib/queries/useCollectionSearch.tsx +++ b/src/webapp/features/collections/lib/queries/useCollectionSearch.tsx @@ -1,5 +1,6 @@ import { useQuery } from '@tanstack/react-query'; import { getMyCollections } from '../dal'; +import { collectionKeys } from '../collectionKeys'; interface Props { query: string; @@ -11,7 +12,7 @@ interface Props { export default function useCollectionSearch(props: Props) { // TODO: replace with infinite suspense query const collections = useQuery({ - queryKey: ['collection search', props.query, props.params?.limit], + queryKey: collectionKeys.search(props.query), queryFn: () => getMyCollections({ limit: props.params?.limit ?? 10, diff --git a/src/webapp/features/collections/lib/queries/useCollections.tsx b/src/webapp/features/collections/lib/queries/useCollections.tsx index 0bad3d86..befd4335 100644 --- a/src/webapp/features/collections/lib/queries/useCollections.tsx +++ b/src/webapp/features/collections/lib/queries/useCollections.tsx @@ -1,5 +1,6 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { getCollections } from '../dal'; +import { collectionKeys } from '../collectionKeys'; interface Props { didOrHandle: string; @@ -10,7 +11,7 @@ export default function useCollections(props: Props) { const limit = props?.limit ?? 15; return useSuspenseInfiniteQuery({ - queryKey: ['collections', props.didOrHandle, limit], + queryKey: collectionKeys.infinite(), initialPageParam: 1, queryFn: ({ pageParam }) => getCollections(props.didOrHandle, { diff --git a/src/webapp/features/collections/lib/queries/useMyCollections.tsx b/src/webapp/features/collections/lib/queries/useMyCollections.tsx index 3e1e8757..f1b1f695 100644 --- a/src/webapp/features/collections/lib/queries/useMyCollections.tsx +++ b/src/webapp/features/collections/lib/queries/useMyCollections.tsx @@ -1,5 +1,6 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { getMyCollections } from '../dal'; +import { collectionKeys } from '../collectionKeys'; interface Props { limit?: number; @@ -9,7 +10,7 @@ export default function useMyCollections(props?: Props) { const limit = props?.limit ?? 15; return useSuspenseInfiniteQuery({ - queryKey: ['collections', limit], + queryKey: collectionKeys.mine(), initialPageParam: 1, queryFn: ({ pageParam }) => getMyCollections({ limit, page: pageParam }), getNextPageParam: (lastPage) => { diff --git a/src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx b/src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx index c27e08c7..c552d2f0 100644 --- a/src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx +++ b/src/webapp/features/collections/lib/queries/useSembleCollectionts.tsx @@ -1,5 +1,6 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { getCollectionsForUrl } from '../dal'; +import { collectionKeys } from '../collectionKeys'; interface Props { url: string; @@ -10,7 +11,7 @@ export default function useSembleCollections(props: Props) { const limit = props?.limit ?? 16; const collections = useSuspenseInfiniteQuery({ - queryKey: ['semble collections', props.url, limit], + queryKey: collectionKeys.bySembleUrl(props.url), initialPageParam: 1, queryFn: ({ pageParam = 1 }) => { return getCollectionsForUrl(props.url, { page: pageParam, limit });