Read-it-later social network
init explore, /pub page
authored by
+27
src/lib/utils.ts
+27
src/lib/utils.ts
···
14
14
const info = await result.json();
15
15
return info;
16
16
}
17
+
18
+
export type Node = {
19
+
uri: string;
20
+
cid: string;
21
+
did: string;
22
+
indexedAt: string;
23
+
actorHandle: string;
24
+
}
25
+
26
+
export type PublicationNode = Node & { value: {
27
+
url: string;
28
+
name: string;
29
+
description: string;
30
+
}}
31
+
32
+
export type DocumentNode = Node & { value: {
33
+
title: string;
34
+
site: string;
35
+
publishedAt: string;
36
+
path?: string;
37
+
content?: string;
38
+
bskyPostRef?: string;
39
+
description?: string;
40
+
textContent?: string;
41
+
tags?: string[];
42
+
updatedAt?: string;
43
+
}}
+50
-2
src/routes/+page.svelte
+50
-2
src/routes/+page.svelte
···
1
1
<script lang="ts">
2
+
import type { PublicationNode } from '$lib/utils';
3
+
import { createInfiniteQuery, createQuery } from '@tanstack/svelte-query';
4
+
2
5
let { data } = $props();
3
-
let query = $state("");
4
-
let filterTags = $state<string[]>([]);
6
+
let { atclient, user } = data;
7
+
8
+
const publicationsQuery = createInfiniteQuery(() => ({
9
+
queryKey: ["publications"],
10
+
queryFn: async ({ pageParam }) => {
11
+
const query = `
12
+
query GetPublications {
13
+
siteStandardPublication(first: 20, after: "${pageParam}") {
14
+
edges {}
15
+
pageInfo {
16
+
hasNextPage
17
+
endCursor
18
+
}
19
+
}
20
+
}
21
+
`;
22
+
const data = await atclient.publicQuery(query);
23
+
return data as {
24
+
siteStandardPublication: {
25
+
edges: { node: PublicationNode, cursor: string }[],
26
+
pageInfo: {
27
+
hasNextPage: boolean;
28
+
endCursor: string;
29
+
}
30
+
}
31
+
}
32
+
},
33
+
staleTime: 1000000,
34
+
initialPageParam: "",
35
+
getNextPageParam: (lastPage) => lastPage.siteStandardPublication.pageInfo.endCursor
36
+
}));
5
37
</script>
38
+
39
+
{#if publicationsQuery.isFetching}
40
+
<p>Fetching...</p>
41
+
{:else if publicationsQuery.isError}
42
+
<p>Error</p>
43
+
{:else if publicationsQuery.isSuccess}
44
+
{@const publications = publicationsQuery.data.pages.map((p) => p.siteStandardPublication.edges.map((edge) => edge.node)).flat()}
45
+
{#each publications as publication}
46
+
<a href={`/pub?uri=${publication.uri}`}>{publication.uri}</a>
47
+
<p>{publication.value.url}</p>
48
+
{/each}
49
+
{#if publicationsQuery.hasNextPage}
50
+
<button onclick={() => publicationsQuery.fetchNextPage()}>Next Page</button>
51
+
{/if}
52
+
{/if}
53
+
+61
src/routes/pub/+page.svelte
+61
src/routes/pub/+page.svelte
···
1
+
<script lang="ts">
2
+
import { page } from '$app/state';
3
+
import type { DocumentNode, PublicationNode } from '$lib/utils';
4
+
import { createInfiniteQuery, createQuery } from '@tanstack/svelte-query';
5
+
6
+
let { data } = $props();
7
+
let { atclient, user } = data;
8
+
9
+
let uri = $derived(page.url.searchParams.get("uri"));
10
+
$inspect(uri);
11
+
12
+
const documentsQuery = createQuery(() => ({
13
+
queryKey: ["documents", uri],
14
+
queryFn: async ({ pageParam }) => {
15
+
const query = `
16
+
query GetDocuments {
17
+
siteStandardDocument(where: {
18
+
site: {
19
+
eq: "${uri}"
20
+
}
21
+
}) {
22
+
edges {}
23
+
pageInfo {
24
+
hasNextPage
25
+
endCursor
26
+
}
27
+
}
28
+
}
29
+
`;
30
+
const data = await atclient.publicQuery(query);
31
+
console.log(data);
32
+
return data as {
33
+
siteStandardDocument: {
34
+
edges: { node: DocumentNode, cursor: string }[],
35
+
pageInfo: {
36
+
hasNextPage: boolean;
37
+
endCursor: string;
38
+
}
39
+
}
40
+
}
41
+
},
42
+
// @ts-ignore
43
+
select: (data) => data.siteStandardDocument.edges.map((edge) => edge.node)
44
+
}));
45
+
</script>
46
+
47
+
{#if documentsQuery.isFetching}
48
+
<p>Fetching...</p>
49
+
{:else if documentsQuery.isError}
50
+
<p>Error</p>
51
+
{:else if documentsQuery.isSuccess}
52
+
{@const documents = documentsQuery.data}
53
+
{#if documents.length === 0}
54
+
<p>No documents...</p>
55
+
{:else}
56
+
{#each documents as document}
57
+
<p>{document.value.title}</p>
58
+
{/each}
59
+
{/if}
60
+
{/if}
61
+