t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Invalidate infiniteFeed after like
Invalidate the 'infiniteFeed' react-query cache when a song is liked
from SongCover and StickyPlayer. Add useQueryClient and
feedGeneratorUriAtom
usage and make onLike async to await cache invalidation.
tsiry-sandratraina.com
+9
apps/web/src/components/SongCover/SongCover.tsx
+9
apps/web/src/components/SongCover/SongCover.tsx
···
4
4
import useLike from "../../hooks/useLike";
5
5
import SignInModal from "../SignInModal";
6
6
import { useState } from "react";
7
+
import { useQueryClient } from "@tanstack/react-query";
8
+
import { useAtomValue } from "jotai";
9
+
import { feedGeneratorUriAtom } from "../../atoms/feed";
7
10
8
11
const Cover = styled.img<{ size?: number }>`
9
12
border-radius: 8px;
···
64
67
};
65
68
66
69
function SongCover(props: SongCoverProps) {
70
+
const queryClient = useQueryClient();
71
+
const feedUri = useAtomValue(feedGeneratorUriAtom);
67
72
const [isSignInOpen, setIsSignInOpen] = useState(false);
68
73
const [liked, setLiked] = useState(props.liked);
69
74
const { like, unlike } = useLike();
···
88
93
}
89
94
await like(uri);
90
95
}
96
+
97
+
await queryClient.invalidateQueries({
98
+
queryKey: ["infiniteFeed", feedUri],
99
+
});
91
100
};
92
101
return (
93
102
<CoverWrapper onClick={(e) => e.stopPropagation()}>
+10
-2
apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
+10
-2
apps/web/src/components/StickyPlayer/StickyPlayerWithData.tsx
···
1
1
import axios from "axios";
2
-
import { useAtom } from "jotai";
2
+
import { useAtom, useAtomValue } from "jotai";
3
3
import _ from "lodash";
4
4
import { useCallback, useEffect, useRef, useState } from "react";
5
5
import { nowPlayingAtom } from "../../atoms/nowpaying";
···
9
9
import useSpotify from "../../hooks/useSpotify";
10
10
import StickyPlayer from "./StrickyPlayer";
11
11
import { consola } from "consola";
12
+
import { useQueryClient } from "@tanstack/react-query";
13
+
import { feedGeneratorUriAtom } from "../../atoms/feed";
12
14
13
15
function StickyPlayerWithData() {
16
+
const queryClient = useQueryClient();
17
+
const feedUri = useAtomValue(feedGeneratorUriAtom);
14
18
const [liked, setLiked] = useState<Record<string, boolean>>({});
15
19
const [nowPlaying, setNowPlaying] = useAtom(nowPlayingAtom);
16
20
const progressInterval = useRef<number | null>(null);
···
25
29
const playerRef = useRef(player);
26
30
const likedRef = useRef(liked);
27
31
28
-
const onLike = (uri: string) => {
32
+
const onLike = async (uri: string) => {
29
33
setLiked({
30
34
...liked,
31
35
[uri]: true,
···
39
43
...prev,
40
44
liked: true,
41
45
};
46
+
});
47
+
48
+
await queryClient.invalidateQueries({
49
+
queryKey: ["infiniteFeed", feedUri],
42
50
});
43
51
};
44
52