feat: introduce lru cache for requests

This commit is contained in:
Anthony Fu 2022-11-24 13:47:14 +08:00
parent 6b3a14cf1e
commit a94781df83
13 changed files with 90 additions and 39 deletions

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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

View file

@ -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"

View file

@ -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>

View file

@ -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
View 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)
}

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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.

View file

@ -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>