mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-07 20:59:09 +01:00
feat: introduce lru cache for requests
This commit is contained in:
parent
6b3a14cf1e
commit
a94781df83
13 changed files with 90 additions and 39 deletions
|
@ -7,9 +7,7 @@ const { paginator } = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator
|
<CommonPaginator :paginator="paginator">
|
||||||
:paginator="paginator"
|
|
||||||
>
|
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<AccountCard
|
<AccountCard
|
||||||
:account="item"
|
:account="item"
|
||||||
|
|
|
@ -7,9 +7,7 @@ const { paginator } = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator
|
<CommonPaginator :paginator="paginator">
|
||||||
:paginator="paginator"
|
|
||||||
>
|
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<ConversationCard
|
<ConversationCard
|
||||||
:conversation="item"
|
:conversation="item"
|
||||||
|
|
|
@ -7,9 +7,7 @@ const { paginator } = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator
|
<CommonPaginator :paginator="paginator">
|
||||||
:paginator="paginator"
|
|
||||||
>
|
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<NotificationCard
|
<NotificationCard
|
||||||
:notification="item"
|
:notification="item"
|
||||||
|
|
|
@ -30,8 +30,7 @@ function onclick(e: MouseEvent) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function go() {
|
function go() {
|
||||||
// cache data
|
cacheStatus(status)
|
||||||
useNuxtApp().payload.data[`status-${status.id}`] = status
|
|
||||||
router.push(getStatusPath(status))
|
router.push(getStatusPath(status))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,7 +84,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</AccountInfo>
|
</AccountInfo>
|
||||||
<StatusReplyingTo :status="status" ml5 mt--1 />
|
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
|
||||||
<div pl15>
|
<div pl15>
|
||||||
<StatusBody :status="status" />
|
<StatusBody :status="status" />
|
||||||
<StatusMedia
|
<StatusMedia
|
||||||
|
|
|
@ -16,9 +16,9 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex flex-col gap-2 my-4 px-4>
|
<div flex flex-col gap-2 py3 px-4>
|
||||||
<AccountInfo :account="status.account" />
|
<AccountInfo :account="status.account" />
|
||||||
<StatusReplyingTo :status="status" />
|
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
|
||||||
<StatusBody :status="status" text-2xl />
|
<StatusBody :status="status" text-2xl />
|
||||||
<StatusMedia
|
<StatusMedia
|
||||||
v-if="status.mediaAttachments?.length"
|
v-if="status.mediaAttachments?.length"
|
||||||
|
|
|
@ -5,21 +5,17 @@ const { status } = defineProps<{
|
||||||
status: Status
|
status: Status
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const replyingTo = asyncComputed(async () => {
|
const account = await fetchAccount(status.inReplyToAccountId!)
|
||||||
if (status.inReplyToAccountId)
|
|
||||||
return await masto.accounts.fetch(status.inReplyToAccountId)
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="replyingTo">
|
<template v-if="account">
|
||||||
<div
|
<div
|
||||||
flex="~ gap-1.5" items-center text-sm text-gray:85
|
flex="~ gap-1.5" items-center text-sm text-gray:85
|
||||||
:title="`Replying to ${getDisplayName(replyingTo)}`"
|
:title="`Replying to ${getDisplayName(account)}`"
|
||||||
>
|
>
|
||||||
<div i-ri:reply-fill rotate-180 op50 />
|
<div i-ri:reply-fill rotate-180 op50 />
|
||||||
<AccountInlineInfo :account="replyingTo" />
|
<AccountInlineInfo :account="account" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -7,9 +7,7 @@ const { paginator } = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator
|
<CommonPaginator :paginator="paginator">
|
||||||
:paginator="paginator"
|
|
||||||
>
|
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<StatusCard
|
<StatusCard
|
||||||
:status="item"
|
:status="item"
|
||||||
|
|
65
composables/cache.ts
Normal file
65
composables/cache.ts
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
import LRU from 'lru-cache'
|
||||||
|
import type { Account, Status } from 'masto'
|
||||||
|
|
||||||
|
const cache = new LRU<string, any>({
|
||||||
|
max: 1000,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (process.dev)
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log({ cache })
|
||||||
|
|
||||||
|
export function setCached(key: string, value: any) {
|
||||||
|
cache.set(key, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchStatus(id: string) {
|
||||||
|
const key = `status:${id}`
|
||||||
|
const cached = cache.get(key)
|
||||||
|
if (cached)
|
||||||
|
return cached
|
||||||
|
const promise = masto.statuses.fetch(id)
|
||||||
|
.then((status) => {
|
||||||
|
cacheStatus(status)
|
||||||
|
return status
|
||||||
|
})
|
||||||
|
cache.set(key, promise)
|
||||||
|
return promise
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAccount(id: string) {
|
||||||
|
const key = `account:${id}`
|
||||||
|
const cached = cache.get(key)
|
||||||
|
if (cached)
|
||||||
|
return cached
|
||||||
|
const promise = masto.accounts.fetch(id)
|
||||||
|
.then((account) => {
|
||||||
|
cacheAccount(account)
|
||||||
|
return account
|
||||||
|
})
|
||||||
|
cache.set(key, promise)
|
||||||
|
return promise
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchAccountByName(acct: string) {
|
||||||
|
const key = `account:${acct}`
|
||||||
|
const cached = cache.get(key)
|
||||||
|
if (cached)
|
||||||
|
return cached
|
||||||
|
const account = masto.accounts.fetch(acct)
|
||||||
|
.then((r) => {
|
||||||
|
cacheAccount(r)
|
||||||
|
return r
|
||||||
|
})
|
||||||
|
cache.set(key, account)
|
||||||
|
return account
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cacheStatus(status: Status) {
|
||||||
|
setCached(`status:${status.id}`, status)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cacheAccount(account: Account) {
|
||||||
|
setCached(`account:${account.id}`, account)
|
||||||
|
setCached(`account:${account.acct}`, account)
|
||||||
|
}
|
|
@ -14,7 +14,7 @@ export function getAccountPath(account: Account) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getStatusPath(status: Status) {
|
export function getStatusPath(status: Status) {
|
||||||
return `${getAccountPath(status.account)}/${status.id}`
|
return `/status/${status.id}`
|
||||||
}
|
}
|
||||||
|
|
||||||
// Batch requests for relationships when used in the UI
|
// Batch requests for relationships when used in the UI
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const params = useRoute().params
|
const params = useRoute().params
|
||||||
const user = $computed(() => params.user as string)
|
const accountName = $computed(() => params.account as string)
|
||||||
|
|
||||||
const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
|
const account = await fetchAccountByName(accountName)
|
||||||
const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
|
const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const params = useRoute().params
|
const params = useRoute().params
|
||||||
const user = $computed(() => params.user as string)
|
const accountName = $computed(() => params.account as string)
|
||||||
|
|
||||||
const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
|
const account = await fetchAccountByName(accountName)
|
||||||
const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
|
const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,10 +4,9 @@ const props = defineProps<{
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const params = useRoute().params
|
const params = useRoute().params
|
||||||
const user = $computed(() => params.user as string)
|
const accountName = $computed(() => params.account as string)
|
||||||
|
|
||||||
const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
|
|
||||||
|
|
||||||
|
const account = await fetchAccountByName(accountName)
|
||||||
const tabNames = ['Posts', 'Posts and replies'] as const
|
const tabNames = ['Posts', 'Posts and replies'] as const
|
||||||
|
|
||||||
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
|
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
|
|
@ -2,22 +2,22 @@
|
||||||
import type { Component } from 'vue'
|
import type { Component } from 'vue'
|
||||||
|
|
||||||
const params = useRoute().params
|
const params = useRoute().params
|
||||||
const id = computed(() => params.post as string)
|
const id = $computed(() => params.status as string)
|
||||||
const main = ref<Component | null>(null)
|
const main = ref<Component | null>(null)
|
||||||
|
|
||||||
const { data: status } = await useAsyncData(`status-${id}`, () => masto.statuses.fetch(params.post as string))
|
const status = await fetchStatus(id)
|
||||||
const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fetchContext(params.post as string))
|
const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="status">
|
<template v-if="status">
|
||||||
<template v-if="context">
|
<template v-if="context">
|
||||||
<template v-for="comment of context?.ancestors" :key="comment.id">
|
<template v-for="comment of context?.ancestors" :key="comment.id">
|
||||||
<StatusCard :status="comment" border="t base" pt-4 />
|
<StatusCard :status="comment" border="t base" py3 />
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<StatusDetails ref="main" :status="status" border="t base" pt-4 />
|
<StatusDetails ref="main" :status="status" border="t base" />
|
||||||
<div v-if="currentUser" border="t base" p6 flex gap-4>
|
<div v-if="currentUser" border="t base" p6 flex gap-4>
|
||||||
<AccountAvatar :account="currentUser.account" w-10 h-10 />
|
<AccountAvatar :account="currentUser.account" w-10 h-10 />
|
||||||
<PublishWidget
|
<PublishWidget
|
||||||
|
@ -30,7 +30,7 @@ const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fet
|
||||||
|
|
||||||
<template v-if="context">
|
<template v-if="context">
|
||||||
<template v-for="comment of context?.descendants" :key="comment.id">
|
<template v-for="comment of context?.descendants" :key="comment.id">
|
||||||
<StatusCard :status="comment" border="t base" pt-4 />
|
<StatusCard :status="comment" border="t base" py3 />
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
Loading…
Reference in a new issue