isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: expose via query hook instead
+26
-7
src/lib/queries/get-avatar.ts
+26
-7
src/lib/queries/get-avatar.ts
···
8
8
ShTangledActorProfile,
9
9
shTangledActorProfileSchema,
10
10
} from "@/lib/types/lexicons/sh/tangled/actor/profile";
11
+
import { useQuery } from "@tanstack/react-query";
11
12
12
13
/**
13
14
* Gets the avatar of the specified DID from their repository. Specifically, queries for sh.tangled.actor.profile self records first, then as a fallback, queries for app.bsky.actor.profile.
···
17
18
* @param {string} params.did - The DID you want to fetch. This should be a "did:plc:..." or a "did:web:...". This is NOT checked at runtime.
18
19
* @param {URL} params.repoUrl - The URL of the DID's home repository (PDS). Omit any trailing slashes. This is automatically trimmed at runtime.
19
20
*/
20
-
export const getAvatar = async ({
21
-
did,
22
-
repoUrl,
23
-
}: {
24
-
did: string;
25
-
repoUrl: URL;
26
-
}) => {
21
+
const getAvatar = async ({ did, repoUrl }: { did: string; repoUrl: URL }) => {
27
22
const repoUrlString = repoUrl.toString();
28
23
const cleanedUrl = repoUrlString.endsWith("/")
29
24
? repoUrlString.substring(0, repoUrlString.length - 1)
···
134
129
135
130
return ok(bskyProfile);
136
131
};
132
+
133
+
export const avatarQueryKey = (did: string) => ["avatar", did];
134
+
135
+
/**
136
+
* Hook that wraps useQuery with the query function being the getAvatar query. See below for the query function definition itself.
137
+
* Gets the avatar of the specified DID from their repository. Specifically, queries for sh.tangled.actor.profile self records first, then as a fallback, queries for app.bsky.actor.profile.
138
+
* If both return invalid avatar blob URLs, then it returns "#" as a fallback.
139
+
* You should **NOT** use '#' as the value to an <img> element's `src` attribute. Instead, call the function early then set some other fallback in the component return.
140
+
* @param {Object} params - The supplied params object.
141
+
* @param {string} params.did - The DID you want to fetch. This should be a "did:plc:..." or a "did:web:...". This is NOT checked at runtime.
142
+
* @param {URL} params.repoUrl - The URL of the DID's home repository (PDS). Omit any trailing slashes. This is automatically trimmed at runtime.
143
+
*/
144
+
export const useAvatarQuery = ({
145
+
did,
146
+
repoUrl,
147
+
}: {
148
+
did: string;
149
+
repoUrl: URL;
150
+
}) => {
151
+
return useQuery({
152
+
queryKey: avatarQueryKey(did),
153
+
queryFn: () => getAvatar({ did, repoUrl }),
154
+
});
155
+
};