feat: use internal endpoint to fetch data on server side

src/components/organisms/levels/info/LevelLeaderboard.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import { api } from '@/api';
 
   import LoadingSpinner from '@atoms/common/LoadingSpinner.svelte';
   import SectionTitle from '@atoms/common/MainSectionTitle.svelte';
   import type { ListResponse, PlayLog } from '@/types';
   import LevelLeaderboardItem from '@organisms/levels/info/LevelLeaderboardItem.svelte';
+  import axios from 'axios';
 
   export let levelId: number;
 
   $: promise = browser
-    ? api
+    ? axios
         .get<ListResponse<PlayLog>>('/api/v1/playLogs', {
           params: {
             levelId,

src/components/organisms/user/UserOverlay.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
   import { browser } from '$app/environment';
 
-  import { api } from '@/api';
-
   import type { Member, PartialMember } from '@/types';
   import LoadingSpinner from '@atoms/common/LoadingSpinner.svelte';
-  // import Avatar from '../atoms/Avatar.svelte';
-  // import Button from '../atoms/Button.svelte';
-  // import Image from '../atoms/Image.svelte';
   import UserOverlayDetail from '@molecules/user/UserOverlayDetail.svelte';
-  // import Translation from '../utils/Translation.svelte';
+  import { clientApi } from '$lib/api';
 
   export let user: PartialMember;
 
   $: fullUserPromise = browser
-    ? api.get<Member>(`/api/v1/members/${user.id}`).then((x) => x.data)
+    ? clientApi.get<Member>(`/api/v1/members/${user.id}`).then((x) => x.data)
     : null;
 </script>
 

src/components/templates/LevelList.svelte

@@ -8,14 +8,14 @@
   import type { Level, ListResponse } from '@/types';
   import { browser } from '$app/environment';
   import { writable, type Writable } from 'svelte/store';
-  import { api } from '@/api';
   import LevelListItem from '@organisms/levels/list/LevelListItem.svelte';
   import PageContainer from '@atoms/common/PageContainer.svelte';
   import { onDestroy, onMount } from 'svelte';
   import { createInfiniteQuery, getQueryClientContext } from '@tanstack/svelte-query';
   import VirtualList from '../utils/VirtualList.svelte';
   import LoadingSpinner from '../atoms/common/LoadingSpinner.svelte';
   import LevelTableView from '../organisms/levels/list/LevelTableView.svelte';
+  import { clientApi } from '$lib/api';
 
   let randomSeed: Writable<number | null> = writable(null);
 
@@ -47,7 +47,7 @@
   // };
 
   const fetchPage = async (page: number, signal: AbortSignal) => {
-    const { data } = await api.get<ListResponse<Level>>('/api/v1/levels', {
+    const { data } = await clientApi.get<ListResponse<Level>>('/api/v1/levels', {
       params: params(page * pageSize),
       signal
     });

src/api.ts → src/lib/api.ts

@@ -1,6 +1,6 @@
 import Axios from 'axios';
 import { PUBLIC_API_ENDPOINT } from '$env/static/public';
 
-export const api = Axios.create({
+export const clientApi = Axios.create({
   baseURL: PUBLIC_API_ENDPOINT
 });

src/lib/server/serverApi.ts

@@ -0,0 +1,7 @@
+import Axios from 'axios';
+import { env } from '$env/dynamic/private';
+import { PUBLIC_API_ENDPOINT } from '$env/static/public';
+
+export const serverApi = Axios.create({
+  baseURL: env.PRIVATE_API_ENDPOINT || PUBLIC_API_ENDPOINT
+});

src/routes/+page.ts → src/routes/+page.server.ts

@@ -1,12 +1,12 @@
-import { api } from '@/api';
-import type { Level, ListResponse, PlayLog, PlayLogWithLevel, SyncStatusResponse } from '@/types';
+import { serverApi } from '$lib/server/serverApi';
+import type { Level, ListResponse, PlayLog, PlayLogWithLevel } from '@/types';
 
 import type { PageLoad } from './$types';
 
 const loadPlayLogs = async () => {
   const {
     data: { results: topPlaysRaw }
-  } = await api.get<ListResponse<PlayLog>>('/api/v1/playLogs', {
+  } = await serverApi.get<ListResponse<PlayLog>>('/api/v1/playLogs', {
     params: {
       offset: 0,
       amount: 3,
@@ -19,14 +19,14 @@ const loadPlayLogs = async () => {
       ...x,
       level: {
         ...x.level,
-        ...(await (await api.get<Level>(`/api/v1/levels/${x.level.id}`)).data)
+        ...(await serverApi.get<Level>(`/api/v1/levels/${x.level.id}`)).data
       }
     }))
   ) as Promise<PlayLogWithLevel[]>;
 };
 
 const loadRecentLevels = () =>
-  api
+  serverApi
     .get<ListResponse<Level>>('/api/v1/levels', {
       params: {
         offset: 0,
@@ -36,18 +36,11 @@ const loadRecentLevels = () =>
     })
     .then((x) => x.data.results);
 
-const loadSyncStatus = () => api.get<SyncStatusResponse>('/api/v1/status/sync').then((x) => x.data);
-
 export const load: PageLoad = async () => {
-  const [topPlays, recentLevels, syncStatus] = await Promise.all([
-    loadPlayLogs(),
-    loadRecentLevels(),
-    loadSyncStatus()
-  ]);
+  const [topPlays, recentLevels] = await Promise.all([loadPlayLogs(), loadRecentLevels()]);
 
   return {
     topPlays,
-    recentLevels,
-    syncStatus
+    recentLevels
   };
 };

src/routes/levels/[id]/+page.server.ts

@@ -1,11 +1,11 @@
-import { api } from '@/api';
+import { serverApi } from '$lib/server/serverApi';
 import type { Level } from '@/types';
 import { levelOpenGraphUrl } from '@/utils/og';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ params }) => {
-  const { data, status } = await api.get<Level>(`/api/v1/levels/${params.id}`, {
+  const { data, status } = await serverApi.get<Level>(`/api/v1/levels/${params.id}`, {
     validateStatus: (status) => [200, 404].includes(status)
   });
 

src/routes/rankings/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import { api } from '@/api';
 
   import LoadingSpinner from '@atoms/common/LoadingSpinner.svelte';
   import MainSectionTitle from '@atoms/common/MainSectionTitle.svelte';
@@ -11,6 +10,7 @@
   import type { RankingResult } from './+page';
   import VirtualList from '@/components/utils/VirtualList.svelte';
   import { createInfiniteQuery } from '@tanstack/svelte-query';
+  import { clientApi } from '$lib/api';
 
   const pageSize = 30;
 
@@ -24,7 +24,7 @@
   });
 
   const fetchPage = async (page: number, signal: AbortSignal) => {
-    const { data } = await api.get<ListResponse<RankingResult>>('/api/v1/ranking', {
+    const { data } = await clientApi.get<ListResponse<RankingResult>>('/api/v1/ranking', {
       params: { offset: page * pageSize, amount: pageSize },
       signal
     });