feat: use server-defined default limits for channel and channel lists (#2940)

### 🎯 Goal

Removes the built-in defaults for channel and message limit in `queryChannels`.
This allows for faster app load and smaller response sizes when SDK default filters are used.

Ticket:
https://linear.app/stream/issue/REACT-763/use-server-side-defined-default-limits-for-querychannels

Author: oliverlaz

.nvmrc

@@ -1 +1 @@
-lts/*
+24

examples/vite/src/App.tsx

@@ -48,7 +48,13 @@ const filters: ChannelFilters = {
   type: 'messaging',
   archived: false,
 };
-const options: ChannelOptions = { limit: 5, presence: true, state: true };
+const options: ChannelOptions = {
+  // limit: 10,
+  // message_limit: 10,
+  // member_limit: 10,
+  presence: true,
+  state: true,
+};
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
 // @ts-ignore

package.json

@@ -112,7 +112,6 @@
     "i18next": "^25.2.1",
     "linkifyjs": "^4.3.2",
     "lodash.debounce": "^4.0.8",
-    "lodash.defaultsdeep": "^4.6.1",
     "lodash.mergewith": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",

src/components/Channel/Channel.tsx

@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 import clsx from 'clsx';
 import debounce from 'lodash.debounce';
-import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import type {
   APIErrorResponse,
@@ -65,7 +64,6 @@ import {
 import { CHANNEL_CONTAINER_ID } from './constants';
 import {
   DEFAULT_HIGHLIGHT_DURATION,
-  DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
   DEFAULT_JUMP_TO_PAGE_SIZE,
   DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
   DEFAULT_THREAD_PAGE_SIZE,
@@ -293,7 +291,7 @@ const ChannelInner = (
     activeUnreadHandler,
     allowConcurrentAudioPlayback,
     channel,
-    channelQueryOptions: propChannelQueryOptions,
+    channelQueryOptions,
     children,
     doDeleteMessageRequest,
     doMarkReadRequest,
@@ -308,16 +306,6 @@ const ChannelInner = (
     skipMessageDataMemoization,
   } = props;
 
-  const channelQueryOptions: ChannelQueryOptions & {
-    messages: { limit: number };
-  } = useMemo(
-    () =>
-      defaultsDeep(propChannelQueryOptions, {
-        messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
-      }),
-    [propChannelQueryOptions],
-  );
-
   const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } =
     useChatContext('Channel');
   const { t } = useTranslationContext('Channel');

src/components/Channel/__tests__/Channel.test.js

@@ -334,7 +334,11 @@ describe('Channel', () => {
   it('should watch the current channel on mount', async () => {
     const watchSpy = jest.spyOn(channel, 'watch');
 
-    await renderComponent({ channel, chatClient });
+    await renderComponent({
+      channel,
+      channelQueryOptions: { messages: { limit: 25 } },
+      chatClient,
+    });
 
     await waitFor(() => {
       expect(watchSpy).toHaveBeenCalledTimes(1);
@@ -380,9 +384,12 @@ describe('Channel', () => {
     ]);
     let hasMore;
     await act(() => {
-      renderComponent({ channel, chatClient }, ({ hasMore: contextHasMore }) => {
-        hasMore = contextHasMore;
-      });
+      renderComponent(
+        { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
+        ({ hasMore: contextHasMore }) => {
+          hasMore = contextHasMore;
+        },
+      );
     });
 
     await waitFor(() => {
@@ -395,9 +402,12 @@ describe('Channel', () => {
       queryChannelWithNewMessages(Array.from({ length: 25 }, generateMessage), channel),
     ]);
     let hasMore;
-    await renderComponent({ channel, chatClient }, ({ hasMore: contextHasMore }) => {
-      hasMore = contextHasMore;
-    });
+    await renderComponent(
+      { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
+      ({ hasMore: contextHasMore }) => {
+        hasMore = contextHasMore;
+      },
+    );
 
     await waitFor(() => {
       expect(hasMore).toBe(true);
@@ -761,15 +771,21 @@ describe('Channel', () => {
       const limit = 10;
       it("should initiate the hasMore flag with the current message set's pagination hasPrev value", async () => {
         let hasMore;
-        await renderComponent({ channel, chatClient }, ({ hasMore: hasMoreCtx }) => {
-          hasMore = hasMoreCtx;
-        });
+        await renderComponent(
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
+          ({ hasMore: hasMoreCtx }) => {
+            hasMore = hasMoreCtx;
+          },
+        );
         expect(hasMore).toBe(true);
 
         channel.state.messageSets[0].pagination.hasPrev = false;
-        await renderComponent({ channel, chatClient }, ({ hasMore: hasMoreCtx }) => {
-          hasMore = hasMoreCtx;
-        });
+        await renderComponent(
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
+          ({ hasMore: hasMoreCtx }) => {
+            hasMore = hasMoreCtx;
+          },
+        );
         expect(hasMore).toBe(false);
       });
       it('should be able to load more messages', async () => {
@@ -779,7 +795,7 @@ describe('Channel', () => {
         const newMessages = [generateMessage()];
 
         await renderComponent(
-          { channel, chatClient },
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
           ({ loadMore, messages: contextMessages }) => {
             if (!contextMessages.find((message) => message.id === newMessages[0].id)) {
               // Our new message is not yet passed as part of channel context. Call loadMore and mock API response to include it.
@@ -837,7 +853,7 @@ describe('Channel', () => {
           .fill(null)
           .map(() => generateMessage());
         await renderComponent(
-          { channel, chatClient },
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
           ({ hasMore, loadMore, messages: contextMessages }) => {
             if (!contextMessages.some((message) => message.id === newMessages[0].id)) {
               // Our new messages are not yet passed as part of channel context. Call loadMore and mock API response to include it.
@@ -859,12 +875,15 @@ describe('Channel', () => {
         const queryPromise = new Promise(() => {});
         let isLoadingMore = false;
 
-        await renderComponent({ channel, chatClient }, ({ loadingMore, loadMore }) => {
-          // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
-          jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
-          loadMore();
-          isLoadingMore = loadingMore;
-        });
+        await renderComponent(
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
+          ({ loadingMore, loadMore }) => {
+            // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
+            jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
+            loadMore();
+            isLoadingMore = loadingMore;
+          },
+        );
         await waitFor(() => expect(isLoadingMore).toBe(true));
       });
 
@@ -912,7 +931,7 @@ describe('Channel', () => {
         let queryNextPageSpy;
         let contextMessageCount;
         await renderComponent(
-          { channel, chatClient },
+          { channel, channelQueryOptions: { messages: { limit: 25 } }, chatClient },
           ({ loadMore, messages: contextMessages }) => {
             queryNextPageSpy = jest.spyOn(channel, 'query');
             contextMessageCount = contextMessages.length;
@@ -935,9 +954,9 @@ describe('Channel', () => {
           expect(chatClient.axiosInstance.post.mock.calls[1][1]).toMatchObject(
             expect.objectContaining({
               data: {},
-              messages: { id_lt: firstPageMessages[0].id, limit: 100 },
+              messages: { id_lt: firstPageMessages[0].id, limit: 25 },
               state: true,
-              watchers: { limit: 100 },
+              watchers: { limit: 25 },
             }),
           );
           expect(contextMessageCount).toBe(

src/components/ChannelList/ChannelList.tsx

@@ -31,7 +31,7 @@ import {
   useComponentContext,
 } from '../../context';
 import { NullComponent } from '../UtilityComponents';
-import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils';
+import { moveChannelUpwards } from './utils';
 import type { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
 import type { ChannelListMessengerProps } from './ChannelListMessenger';
 import type { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
@@ -234,10 +234,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     channels: Array<Channel>,
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>,
   ) => {
-    if (
-      !channels.length ||
-      channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)
-    ) {
+    if (!channels.length) {
       return;
     }
 

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -186,6 +186,7 @@ describe('ChannelList', () => {
     const props = {
       filters: {},
       List: ChannelListComponent,
+      options: { limit: 25, message_limit: 25 },
       Preview: ChannelPreviewComponent,
     };
 
@@ -291,6 +292,7 @@ describe('ChannelList', () => {
       channelRenderFilterFn: customFilterFunction,
       filters: {},
       List: ChannelListComponent,
+      options: { limit: 25, message_limit: 25 },
       Preview: ChannelPreviewComponent,
     };
 
@@ -634,7 +636,13 @@ describe('ChannelList', () => {
             customActiveChannel={testChannel2.channel.id}
             filters={{}}
             List={ChannelListComponent}
-            options={{ presence: true, state: true, watch: true }}
+            options={{
+              limit: 25,
+              message_limit: 25,
+              presence: true,
+              state: true,
+              watch: true,
+            }}
             Preview={ChannelPreviewComponent}
             setActiveChannel={setActiveChannel}
             setActiveChannelOnMount
@@ -931,6 +939,7 @@ describe('ChannelList', () => {
     const channelListProps = {
       filters: {},
       List: ChannelListComponent,
+      options: { limit: 25, message_limit: 25 },
       Preview: ChannelPreviewComponent,
       renderChannels,
     };
@@ -957,6 +966,7 @@ describe('ChannelList', () => {
       const props = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };
       const sendNewMessageOnChannel3 = async () => {
@@ -1065,7 +1075,13 @@ describe('ChannelList', () => {
             <ChannelList
               filters={{}}
               List={ChannelListComponent}
-              options={{ presence: true, state: true, watch: true }}
+              options={{
+                limit: 25,
+                message_limit: 25,
+                presence: true,
+                state: true,
+                watch: true,
+              }}
               Preview={ChannelPreviewComponent}
             />
           </Chat>,
@@ -1104,7 +1120,13 @@ describe('ChannelList', () => {
               filters={{}}
               List={ChannelListComponent}
               onMessageNew={onMessageNew}
-              options={{ presence: true, state: true, watch: true }}
+              options={{
+                limit: 25,
+                message_limit: 25,
+                presence: true,
+                state: true,
+                watch: true,
+              }}
               Preview={ChannelPreviewComponent}
             />
           </Chat>,
@@ -1131,7 +1153,13 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
-        options: { presence: true, state: true, watch: true },
+        options: {
+          limit: 25,
+          message_limit: 25,
+          presence: true,
+          state: true,
+          watch: true,
+        },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1200,6 +1228,7 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1263,6 +1292,7 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1331,6 +1361,7 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1420,6 +1451,7 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1487,7 +1519,13 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
-        options: { presence: true, state: true, watch: true },
+        options: {
+          limit: 25,
+          message_limit: 25,
+          presence: true,
+          state: true,
+          watch: true,
+        },
         Preview: ChannelPreviewComponent,
       };
 
@@ -1555,6 +1593,7 @@ describe('ChannelList', () => {
         const channelListProps = {
           filters: {},
           List: ChannelListComponent,
+          options: { limit: 25, message_limit: 25 },
           Preview: ChannelPreviewComponent,
         };
 
@@ -1595,6 +1634,7 @@ describe('ChannelList', () => {
       const channelListProps = {
         filters: {},
         List: ChannelListComponent,
+        options: { limit: 25, message_limit: 25 },
         Preview: ChannelPreviewComponent,
       };