nandi.uk
This repository has no description
1import { useMutation, useQueryClient } from '@tanstack/react-query';
2import { addUrlToLibrary } from '../dal';
3import { cardKeys } from '../cardKeys';
4import { collectionKeys } from '@/features/collections/lib/collectionKeys';
5import { feedKeys } from '@/features/feeds/lib/feedKeys';
6
7export default function useAddCard() {
8 const queryClient = useQueryClient();
9
10 const mutation = useMutation({
11 mutationFn: (newCard: {
12 url: string;
13 note?: string;
14 collectionIds?: string[];
15 }) => {
16 return addUrlToLibrary(newCard.url, {
17 note: newCard.note,
18 collectionIds: newCard.collectionIds,
19 });
20 },
21
22 // Do things that are absolutely necessary and logic related (like query invalidation) in the useMutation callbacks
23 // 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
24 // https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire
25 onSuccess: (_data, variables) => {
26 queryClient.invalidateQueries({ queryKey: cardKeys.mine() });
27 queryClient.invalidateQueries({ queryKey: cardKeys.all() });
28 queryClient.invalidateQueries({ queryKey: feedKeys.all() });
29 queryClient.invalidateQueries({ queryKey: collectionKeys.mine() });
30 queryClient.invalidateQueries({ queryKey: collectionKeys.infinite() });
31 queryClient.invalidateQueries({ queryKey: collectionKeys.all() });
32 queryClient.invalidateQueries({
33 queryKey: collectionKeys.bySembleUrl(variables.url),
34 });
35
36 // invalidate each collection query individually
37 variables.collectionIds?.forEach((id) => {
38 queryClient.invalidateQueries({
39 queryKey: collectionKeys.collection(id),
40 });
41 queryClient.invalidateQueries({
42 queryKey: collectionKeys.infinite(id),
43 });
44 });
45 },
46 });
47
48 return mutation;
49}