cosmik.network
A social knowledge tool for researchers built on ATProto
fix: card query keys
+53
-27
+10
src/webapp/features/cards/lib/cardKeys.ts
+10
src/webapp/features/cards/lib/cardKeys.ts
···
1
+
export const cardKeys = {
2
+
all: () => ['cards'] as const,
3
+
card: (id: string) => [...cardKeys.all(), id] as const,
4
+
byUrl: (url: string) => [...cardKeys.all(), url] as const,
5
+
mine: () => [...cardKeys.all(), 'mine'] as const,
6
+
search: (query: string) => [...cardKeys.all(), 'search', query],
7
+
bySembleUrl: (url: string) => [...cardKeys.all(), url],
8
+
libraries: (id: string) => [...cardKeys.all(), 'libraries', id],
9
+
infinite: () => [...cardKeys.all(), 'infinite'],
10
+
};
+12
-5
src/webapp/features/cards/lib/mutations/useAddCard.tsx
+12
-5
src/webapp/features/cards/lib/mutations/useAddCard.tsx
···
1
1
import { useMutation, useQueryClient } from '@tanstack/react-query';
2
2
import { addUrlToLibrary } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
4
+
import { collectionKeys } from '@/features/collections/lib/collectionKeys';
3
5
4
6
export default function useAddCard() {
5
7
const queryClient = useQueryClient();
···
20
22
// 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
21
23
// https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire
22
24
onSuccess: (_data, variables) => {
23
-
queryClient.invalidateQueries({ queryKey: ['my cards'] });
24
-
queryClient.invalidateQueries({ queryKey: ['home'] });
25
-
queryClient.invalidateQueries({ queryKey: ['collections'] });
26
-
queryClient.invalidateQueries({ queryKey: ['collection'] });
25
+
queryClient.invalidateQueries({ queryKey: cardKeys.mine() });
26
+
queryClient.invalidateQueries({ queryKey: cardKeys.infinite() });
27
+
queryClient.invalidateQueries({ queryKey: collectionKeys.mine() });
28
+
queryClient.invalidateQueries({ queryKey: collectionKeys.infinite() });
29
+
queryClient.invalidateQueries({
30
+
queryKey: collectionKeys.bySembleUrl(variables.url),
31
+
});
27
32
28
33
// invalidate each collection query individually
29
34
variables.collectionIds?.forEach((id) => {
30
-
queryClient.invalidateQueries({ queryKey: ['collection', id] });
35
+
queryClient.invalidateQueries({
36
+
queryKey: collectionKeys.collection(id),
37
+
});
31
38
});
32
39
},
33
40
});
+6
-5
src/webapp/features/cards/lib/mutations/useRemoveCardFromCollections.tsx
+6
-5
src/webapp/features/cards/lib/mutations/useRemoveCardFromCollections.tsx
···
1
1
import { useMutation, useQueryClient } from '@tanstack/react-query';
2
2
import { removeCardFromCollection } from '../dal';
3
+
import { collectionKeys } from '@/features/collections/lib/collectionKeys';
3
4
4
5
export default function useRemoveCardFromCollections() {
5
6
const queryClient = useQueryClient();
···
16
17
},
17
18
18
19
onSuccess: (_data, variables) => {
19
-
queryClient.invalidateQueries({ queryKey: ['card', variables.cardId] });
20
-
queryClient.invalidateQueries({ queryKey: ['my cards'] });
21
-
queryClient.invalidateQueries({ queryKey: ['home'] });
22
-
queryClient.invalidateQueries({ queryKey: ['collections'] });
20
+
queryClient.invalidateQueries({ queryKey: collectionKeys.infinite() });
21
+
queryClient.invalidateQueries({ queryKey: collectionKeys.mine() });
23
22
24
23
variables.collectionIds.forEach((id) => {
25
-
queryClient.invalidateQueries({ queryKey: ['collection', id] });
24
+
queryClient.invalidateQueries({
25
+
queryKey: collectionKeys.collection(id),
26
+
});
26
27
});
27
28
},
28
29
});
+4
-3
src/webapp/features/cards/lib/mutations/useRemoveCardFromLibrary.tsx
+4
-3
src/webapp/features/cards/lib/mutations/useRemoveCardFromLibrary.tsx
···
1
1
import { useMutation, useQueryClient } from '@tanstack/react-query';
2
2
import { removeCardFromLibrary } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
4
+
import { collectionKeys } from '@/features/collections/lib/collectionKeys';
3
5
4
6
export default function useRemoveCardFromLibrary() {
5
7
const queryClient = useQueryClient();
···
10
12
},
11
13
12
14
onSuccess: () => {
13
-
queryClient.invalidateQueries({ queryKey: ['my cards'] });
14
-
queryClient.invalidateQueries({ queryKey: ['collections'] });
15
-
queryClient.invalidateQueries({ queryKey: ['collection'] });
15
+
queryClient.invalidateQueries({ queryKey: cardKeys.all() });
16
+
queryClient.invalidateQueries({ queryKey: collectionKeys.all() });
16
17
},
17
18
});
18
19
+10
-8
src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx
+10
-8
src/webapp/features/cards/lib/mutations/useUpdateCardAssociations.tsx
···
1
1
import { createSembleClient } from '@/services/apiClient';
2
2
import { useMutation, useQueryClient } from '@tanstack/react-query';
3
+
import { cardKeys } from '../cardKeys';
4
+
import { collectionKeys } from '@/features/collections/lib/collectionKeys';
3
5
4
6
export default function useUpdateCardAssociations() {
5
7
const client = createSembleClient();
···
22
24
},
23
25
24
26
onSuccess: (_data, variables) => {
25
-
queryClient.invalidateQueries({ queryKey: ['my cards'] });
26
-
queryClient.invalidateQueries({ queryKey: ['home'] });
27
-
queryClient.invalidateQueries({ queryKey: ['collections'] });
28
-
queryClient.invalidateQueries({
29
-
queryKey: ['card from my library'],
30
-
});
27
+
queryClient.invalidateQueries({ queryKey: cardKeys.all() });
28
+
queryClient.invalidateQueries({ queryKey: collectionKeys.mine() });
31
29
32
30
// invalidate each collection query individually
33
31
variables.addToCollectionIds?.forEach((id) => {
34
-
queryClient.invalidateQueries({ queryKey: ['collection', id] });
32
+
queryClient.invalidateQueries({
33
+
queryKey: collectionKeys.collection(id),
34
+
});
35
35
});
36
36
37
37
variables.removeFromCollectionIds?.forEach((id) => {
38
-
queryClient.invalidateQueries({ queryKey: ['collection', id] });
38
+
queryClient.invalidateQueries({
39
+
queryKey: collectionKeys.collection(id),
40
+
});
39
41
});
40
42
},
41
43
});
+2
-1
src/webapp/features/cards/lib/queries/useCards.tsx
+2
-1
src/webapp/features/cards/lib/queries/useCards.tsx
···
1
1
import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
2
2
import { getUrlCards } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
3
4
4
5
interface Props {
5
6
didOrHandle: string;
···
10
11
const limit = props?.limit ?? 16;
11
12
12
13
const cards = useSuspenseInfiniteQuery({
13
-
queryKey: ['cards', props.didOrHandle, limit],
14
+
queryKey: cardKeys.infinite(),
14
15
initialPageParam: 1,
15
16
queryFn: ({ pageParam = 1 }) => {
16
17
return getUrlCards(props.didOrHandle, {
+2
-1
src/webapp/features/cards/lib/queries/useGetCard.tsx
+2
-1
src/webapp/features/cards/lib/queries/useGetCard.tsx
···
1
1
import { useSuspenseQuery } from '@tanstack/react-query';
2
2
import { getUrlCardView } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
3
4
4
5
interface Props {
5
6
id: string;
···
7
8
8
9
export default function useGetCard(props: Props) {
9
10
const card = useSuspenseQuery({
10
-
queryKey: ['card', props.id],
11
+
queryKey: cardKeys.card(props.id),
11
12
queryFn: () => getUrlCardView(props.id),
12
13
});
13
14
+2
-1
src/webapp/features/cards/lib/queries/useGetCardFromMyLibrary.tsx
+2
-1
src/webapp/features/cards/lib/queries/useGetCardFromMyLibrary.tsx
···
1
1
import { useSuspenseQuery } from '@tanstack/react-query';
2
2
import { getCardFromMyLibrary } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
3
4
4
5
interface Props {
5
6
url: string;
···
7
8
8
9
export default function useGetCardFromMyLibrary(props: Props) {
9
10
const cardStatus = useSuspenseQuery({
10
-
queryKey: ['card from my library', props.url],
11
+
queryKey: cardKeys.all(),
11
12
queryFn: () => getCardFromMyLibrary(props.url),
12
13
});
13
14
+2
-1
src/webapp/features/cards/lib/queries/useGetLibrariesForcard.tsx
+2
-1
src/webapp/features/cards/lib/queries/useGetLibrariesForcard.tsx
···
1
1
import { useSuspenseQuery } from '@tanstack/react-query';
2
2
import { getLibrariesForCard } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
3
4
4
5
interface Props {
5
6
id: string;
···
7
8
8
9
export default function useGetLibrariesForCard(props: Props) {
9
10
const libraries = useSuspenseQuery({
10
-
queryKey: ['libraries for card', props.id],
11
+
queryKey: cardKeys.libraries(props.id),
11
12
queryFn: () => getLibrariesForCard(props.id),
12
13
});
13
14
+2
-1
src/webapp/features/cards/lib/queries/useMyCards.tsx
+2
-1
src/webapp/features/cards/lib/queries/useMyCards.tsx
···
1
1
import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
2
2
import { getMyUrlCards } from '../dal';
3
+
import { cardKeys } from '../cardKeys';
3
4
4
5
interface Props {
5
6
limit?: number;
···
9
10
const limit = props?.limit ?? 16;
10
11
11
12
const myCards = useSuspenseInfiniteQuery({
12
-
queryKey: ['my cards', limit],
13
+
queryKey: cardKeys.mine(),
13
14
initialPageParam: 1,
14
15
queryFn: ({ pageParam = 1 }) => {
15
16
return getMyUrlCards({ page: pageParam, limit });
+1
-1
src/webapp/features/feeds/lib/queries/useGlobalFeed.tsx
+1
-1
src/webapp/features/feeds/lib/queries/useGlobalFeed.tsx