alternative tangled frontend (extremely wip)
refactor: change how queries are exposed
+60
-24
+16
-5
src/lib/queries/get-avatar.ts
+16
-5
src/lib/queries/get-avatar.ts
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { queryOptions, useQuery } from "@tanstack/react-query";
2
2
import type { Result } from "@/lib/result";
3
3
import type { AppBskyActorProfile } from "@/lib/types/lexicons/app/bsky/actor/profile";
4
4
import type { ShTangledActorProfile } from "@/lib/types/lexicons/sh/tangled/actor/profile";
···
129
129
130
130
export const avatarQueryKey = (did: string | null) => ["avatar", did];
131
131
132
+
export const avatarQueryOptions = ({
133
+
did,
134
+
repoUrl,
135
+
}: {
136
+
did: string;
137
+
repoUrl: URL;
138
+
}) =>
139
+
queryOptions({
140
+
queryKey: avatarQueryKey(did),
141
+
queryFn: () => getAvatar({ did, repoUrl }),
142
+
});
143
+
132
144
/**
133
145
* Hook that wraps useQuery with the query function being the getAvatar query. See below for the query function definition itself.
134
146
* 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.
···
144
156
}: {
145
157
did: string | null;
146
158
repoUrl: URL | null;
147
-
}) => {
148
-
return useQuery({
149
-
queryKey: avatarQueryKey(did),
159
+
}) =>
160
+
useQuery({
161
+
queryKey: ["avatar", did],
150
162
queryFn: () => {
151
163
if (!did || !repoUrl) return "";
152
164
return getAvatar({ did, repoUrl });
153
165
},
154
166
});
155
-
};
+13
-1
src/lib/queries/get-profile.ts
+13
-1
src/lib/queries/get-profile.ts
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { queryOptions, useQuery } from "@tanstack/react-query";
2
2
import type { Result } from "@/lib/result";
3
3
import type { ShTangledActorProfile } from "@/lib/types/lexicons/sh/tangled/actor/profile";
4
4
import { err, ok } from "@/lib/result";
···
58
58
};
59
59
60
60
export const profileQueryKey = (did: string | null) => ["profile", did];
61
+
62
+
export const profileQueryOptions = ({
63
+
did,
64
+
repoUrl,
65
+
}: {
66
+
did: string;
67
+
repoUrl: URL;
68
+
}) =>
69
+
queryOptions({
70
+
queryKey: profileQueryKey(did),
71
+
queryFn: () => getProfile({ did, repoUrl }),
72
+
});
61
73
62
74
/**
63
75
* Hook that wraps useQuery with the query function being the getProfile query. See below for the query function definition itself.
+16
-2
src/lib/queries/get-repos.ts
+16
-2
src/lib/queries/get-repos.ts
···
2
2
import { comAtprotoRepoGetRecordOutputSchema } from "@/lib/types/lexicons/com/atproto/repo/getRecord";
3
3
import { shTangledRepoSchema } from "@/lib/types/lexicons/sh/tangled/repo";
4
4
import { stripTrailingSlashFromUrl } from "@/lib/utils";
5
-
import { useQuery } from "@tanstack/react-query";
5
+
import { queryOptions, useQuery } from "@tanstack/react-query";
6
6
import { z } from "zod/v4";
7
7
8
8
export const getRepos = async ({
···
46
46
return parseData.records;
47
47
};
48
48
49
-
const reposQueryKey = ({
49
+
export const reposQueryKey = ({
50
50
did,
51
51
cursor,
52
52
}: {
53
53
did: string | null;
54
54
cursor: string | null;
55
55
}) => (cursor ? ["repos", did, cursor] : ["repos", did]);
56
+
57
+
export const reposQueryOptions = ({
58
+
did,
59
+
repoUrl,
60
+
cursor,
61
+
}: {
62
+
did: string;
63
+
repoUrl: URL;
64
+
cursor: string | null;
65
+
}) =>
66
+
queryOptions({
67
+
queryKey: reposQueryKey({ did, cursor }),
68
+
queryFn: () => getRepos({ did, repoUrl, cursor }),
69
+
});
56
70
57
71
export const useReposQuery = ({
58
72
did,
+6
-6
src/lib/queries/get-trending-from-stitch.ts
+6
-6
src/lib/queries/get-trending-from-stitch.ts
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { queryOptions, useQuery } from "@tanstack/react-query";
2
2
import { z } from "zod/v4";
3
3
import { appBskyFeedPostSchema } from "@/lib/types/lexicons/app/bsky/feed/post";
4
4
import { comAtprotoRepoGetRecordOutputSchema } from "@/lib/types/lexicons/com/atproto/repo/getRecord";
···
37
37
return parseData.records;
38
38
};
39
39
40
-
const stitchTrendingQueryKey = ["bsky", "posts", STITCH_DID];
40
+
export const stitchTrendingQueryOptions = queryOptions({
41
+
queryKey: ["bsky", "posts", STITCH_DID],
42
+
queryFn: () => getTrendingFromStitch(),
43
+
});
41
44
42
45
export const useTrendingQuery = () => {
43
-
return useQuery({
44
-
queryKey: stitchTrendingQueryKey,
45
-
queryFn: () => getTrendingFromStitch(),
46
-
});
46
+
return useQuery(stitchTrendingQueryOptions);
47
47
};
+9
-10
src/lib/queries/resolve-minidoc.ts
+9
-10
src/lib/queries/resolve-minidoc.ts
···
1
-
import { useQuery } from "@tanstack/react-query";
1
+
import { queryOptions, useQuery } from "@tanstack/react-query";
2
2
import { SLINGSHOT_URL } from "@/lib/consts";
3
3
import { blueMicrocosmIdentityResolveMiniDocOutputSchema } from "@/lib/types/lexicons/blue/microcosm/identity/resolveMiniDoc";
4
4
import { stripTrailingSlashFromUrl } from "@/lib/utils";
···
28
28
return parsedData;
29
29
};
30
30
31
-
const resolveMiniDocQueryKey = (identifier: string) => ["miniDoc", identifier];
31
+
export const miniDocQueryOptions = (identifier: string) =>
32
+
queryOptions({
33
+
queryKey: ["miniDoc", identifier],
34
+
queryFn: () => resolveMiniDoc(identifier),
35
+
});
32
36
33
-
export const useMiniDoc = (identifier: string) => {
34
-
return useQuery({
35
-
queryKey: resolveMiniDocQueryKey(identifier),
36
-
queryFn: async () => {
37
-
return await resolveMiniDoc(identifier);
38
-
},
39
-
});
40
-
};
37
+
// Keep the hook if you want — it's now just a thin wrapper
38
+
export const useMiniDoc = (identifier: string) =>
39
+
useQuery(miniDocQueryOptions(identifier));