feat: improve caching of individual repositories
This commit adds the possibility to provide to the caching component data already known and to be cached immediately without the need of a callback function. This allows caching individual repositories without having to rely on additional API calls. However, repos can also be retrieved individually from the GitHub API based on their full name.
This commit is contained in:
@@ -1,26 +1,45 @@
|
||||
<template>
|
||||
<div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
|
||||
<div class="flex-col info">
|
||||
<h3>{{ props.repo.name }}</h3>
|
||||
<div>
|
||||
<p>
|
||||
{{ props.repo.description }}
|
||||
</p>
|
||||
<ApiLoader
|
||||
:cache-name="repoName()"
|
||||
:url="fetchUrl"
|
||||
:already-known-data="props.data"
|
||||
@data-loaded="(repo: GithubRepo) => (repository = repo)"
|
||||
>
|
||||
<div class="flex-col info">
|
||||
<h3>{{ props.data.name }}</h3>
|
||||
<div>
|
||||
<p>
|
||||
{{ props.data.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-col flex-start gap-1rem stats">
|
||||
<p>Stars: {{ repo.stargazers_count }}</p>
|
||||
<p>Forks: {{ repo.forks_count }}</p>
|
||||
</div>
|
||||
<div class="flex-col flex-start gap-1rem stats">
|
||||
<p>Stars: {{ data.stargazers_count }}</p>
|
||||
<p>Forks: {{ data.forks_count }}</p>
|
||||
</div>
|
||||
</ApiLoader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ApiLoader from '../ApiLoader.vue';
|
||||
|
||||
import { GithubRepo } from '../../composables/github';
|
||||
import { PropType } from 'vue';
|
||||
import { PropType, Ref, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
repo: Object as PropType<GithubRepo>,
|
||||
data: Object as PropType<GithubRepo>,
|
||||
repoName: String,
|
||||
fetcher: String as PropType<'gitea' | 'github'>,
|
||||
});
|
||||
|
||||
const repoName = (): string => {
|
||||
return props.data ? props.data.full_name : props.repoName;
|
||||
};
|
||||
|
||||
const fetchUrl = `https://api.github.com/repos/${repoName()}`;
|
||||
const repository: Ref<GithubRepo> = ref(null);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
Reference in New Issue
Block a user