Fix API response too large :)

frontend/pages/champion/[alias].vue

@@ -27,8 +27,8 @@ function updateState(newState : string, newLane : number) {
     <!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
     <div style="margin-top: 64px; margin-left: 339px;">
         <ChampionTitle v-if="championData.gameCount > 0" :champion-id="championId" :winrate="lane.winrate" :pickrate="lane.pickrate" :game-count="lane.count" />
-        <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="lane.runes" />
-        <ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="lane.builds" />
+        <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="lane.runes!!" />
+        <ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="lane.builds!!" />
         <h2 v-if="championData.gameCount == 0" style="margin: auto; margin-top: 20px; width: fit-content;">Sorry, there is no data for this champion :(</h2>
     </div>
     <!-- <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" /> -->

frontend/server/api/champions.ts

@@ -1,17 +1,20 @@
+import { MongoClient } from 'mongodb';
 import {connectToDatabase, fetchLatestPatch} from '../utils/mongo'
 
-async function champions(client, patch) {
+async function champions(client: MongoClient, patch: string) {
     const database = client.db("champions");
     const collection = database.collection(patch);
-    const data = await collection.find().toArray()
+    const data : Array<ChampionData> = (await collection.find().toArray()) as unknown as Array<ChampionData>
     data.map((x) => {
-        delete x.runes
-        delete x.builds
+        for(let lane of x.lanes) {
+            delete lane.builds
+            delete lane.runes
+        }
     })
     return data
 }
 
-export default defineEventHandler(async (event) => {
+export default defineEventHandler(async (_) => {
     const client = await connectToDatabase();
     const latestPatch = await fetchLatestPatch(client);
 

frontend/types/api.ts

@@ -25,8 +25,8 @@ declare global {
         losingMatches: number
         winrate: number
         pickrate: number
-        runes: Array<Rune>
-        builds: Builds
+        runes?: Array<Rune>
+        builds?: Builds
     }
 
     type ChampionData = {