fix(api-client): send the API key in a header for image downloads

packages/api-client/src/api.service.ts

@@ -33,12 +33,13 @@ import {
 } from "#responses";
 import { User, UserFooter, UserTheme } from "@statsify/schemas";
 import { config } from "@statsify/util";
-import { loadImage } from "@statsify/rendering";
+import { IMAGE_DOWNLOAD_TIMEOUT, loadImage } from "@statsify/rendering";
 
 interface ExtraData {
   headers?: AxiosRequestHeaders;
   body?: Record<string, any> | Buffer | string;
   responseType?: ResponseType;
+  timeout?: number;
 }
 
 // TODO: Move dtos in api to @statsify/api-client
@@ -286,7 +287,7 @@ export class ApiService {
     url: string,
     params: Record<string, unknown> | undefined,
     method: Method = "GET",
-    { body, headers, responseType }: ExtraData = {}
+    { body, headers, responseType, timeout }: ExtraData = {}
   ): Promise<T> {
     const transaction = Sentry.getCurrentHub().getScope()?.getTransaction();
 
@@ -302,6 +303,7 @@ export class ApiService {
       headers,
       data: body,
       responseType,
+      timeout,
     });
 
     child?.setHttpStatus(res.status);
@@ -315,9 +317,11 @@ export class ApiService {
   }
 
   private async requestImage(url: string, params?: Record<string, unknown>) {
-    const uri = this.axios.getUri({ url, params: { key: this.apiKey, ...params } });
-    const image = await loadImage(uri);
+    const buffer = await this.request<Buffer>(url, params, "GET", {
+      responseType: "arraybuffer",
+      timeout: IMAGE_DOWNLOAD_TIMEOUT,
+    });
 
-    return image;
+    return loadImage(buffer);
   }
 }

packages/rendering/src/hooks/loadImage.ts

@@ -10,7 +10,7 @@ import axios from "axios";
 import { Image } from "skia-canvas";
 import { readFile } from "node:fs/promises";
 
-const IMAGE_DOWNLOAD_TIMEOUT = 5_000;
+export const IMAGE_DOWNLOAD_TIMEOUT = 5_000;
 
 const bufferToImage = (buffer: Buffer): Image => {
   const image = new Image(buffer);