Set page size when making timeline requests

src/api/common.ts

@@ -1,5 +1,7 @@
 import { ENV } from "@/constants"
 
+export const PAGE_SIZE = 20
+
 // Wrapped in object for easy stubbing in tests
 export const fetcher = {
   async fetch(url: string, params: RequestInit): Promise<Response> {
@@ -10,7 +12,7 @@ export const fetcher = {
 interface RequestInfo extends RequestInit {
   authToken?: string | null;
   json?: any;
-  queryParams?: { [name: string]: string };
+  queryParams?: { [name: string]: string | number | undefined };
 }
 
 export async function http(
@@ -48,7 +50,15 @@ export async function http(
         // Convert URL string to URL object
         url = new URL(url, window.location.origin)
       }
-      url.search = new URLSearchParams(queryParams).toString()
+      // Serialize query params
+      const serialized = Object.keys(queryParams).reduce((res: { [name: string]: string }, key) => {
+        const value = queryParams[key]
+        if (value !== undefined) {
+          res[key] = value.toString()
+        }
+        return res
+      }, {})
+      url.search = new URLSearchParams(serialized).toString()
     }
     params = { ...defaults, ...requestParams }
   }

src/api/posts.ts

@@ -1,5 +1,5 @@
 import { BACKEND_URL } from "@/constants"
-import { http } from "./common"
+import { PAGE_SIZE, http } from "./common"
 import { Profile } from "./users"
 
 export interface Attachment {
@@ -49,10 +49,7 @@ export async function getHomeTimeline(
   maxId?: string,
 ): Promise<Post[]> {
   const url = `${BACKEND_URL}/api/v1/timelines/home`
-  let queryParams
-  if (maxId) {
-    queryParams = { max_id: maxId }
-  }
+  const queryParams = { max_id: maxId, limit: PAGE_SIZE }
   const response = await http(url, {
     method: "GET",
     queryParams,

src/views/PostList.vue

@@ -23,6 +23,7 @@
 <script lang="ts">
 import { Options, Vue, setup } from "vue-class-component"
 
+import { PAGE_SIZE } from "@/api/common"
 import { Post, getHomeTimeline } from "@/api/posts"
 import Avatar from "@/components/Avatar.vue"
 import PostOrRepost from "@/components/PostOrRepost.vue"
@@ -30,8 +31,6 @@ import PostEditor from "@/components/PostEditor.vue"
 import Sidebar from "@/components/Sidebar.vue"
 import { useCurrentUser } from "@/store/user"
 
-const PAGE_SIZE = 20
-
 @Options({
   components: {
     Avatar,