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