chore: update list memos request

api/v2/common.go

@@ -2,6 +2,10 @@ package v2
 
 import (
 	"context"
+	"encoding/base64"
+
+	"github.com/pkg/errors"
+	"google.golang.org/protobuf/proto"
 
 	apiv2pb "github.com/usememos/memos/proto/gen/api/v2"
 	"github.com/usememos/memos/store"
@@ -42,3 +46,29 @@ func getCurrentUser(ctx context.Context, s *store.Store) (*store.User, error) {
 	}
 	return user, nil
 }
+
+func getPageToken(limit int, offset int) (string, error) {
+	return marshalPageToken(&apiv2pb.PageToken{
+		Limit:  int32(limit),
+		Offset: int32(offset),
+	})
+}
+
+func marshalPageToken(pageToken *apiv2pb.PageToken) (string, error) {
+	b, err := proto.Marshal(pageToken)
+	if err != nil {
+		return "", errors.Wrapf(err, "failed to marshal page token")
+	}
+	return base64.StdEncoding.EncodeToString(b), nil
+}
+
+func unmarshalPageToken(s string, pageToken *apiv2pb.PageToken) error {
+	b, err := base64.StdEncoding.DecodeString(s)
+	if err != nil {
+		return errors.Wrapf(err, "failed to decode page token")
+	}
+	if err := proto.Unmarshal(b, pageToken); err != nil {
+		return errors.Wrapf(err, "failed to unmarshal page token")
+	}
+	return nil
+}

api/v2/memo_service.go

@@ -30,6 +30,7 @@ import (
 )
 
 const (
+	DefaultPageSize  = 10
 	MaxContentLength = 8 * 1024
 )
 
@@ -179,27 +180,51 @@ func (s *APIV2Service) ListMemos(ctx context.Context, request *apiv2pb.ListMemos
 		memoFind.OrderByUpdatedTs = true
 	}
 
-	if request.Limit != 0 {
-		offset, limit := int(request.Offset), int(request.Limit)
-		memoFind.Offset = &offset
-		memoFind.Limit = &limit
+	var limit, offset int
+	if request.PageToken != "" {
+		var pageToken apiv2pb.PageToken
+		if err := unmarshalPageToken(request.PageToken, &pageToken); err != nil {
+			return nil, status.Errorf(codes.InvalidArgument, "invalid page token: %v", err)
+		}
+		if pageToken.Limit < 0 {
+			return nil, status.Errorf(codes.InvalidArgument, "page size cannot be negative")
+		}
+		limit = int(pageToken.Limit)
+		offset = int(pageToken.Offset)
+	} else {
+		limit = int(request.PageSize)
+	}
+	if limit <= 0 {
+		limit = DefaultPageSize
 	}
+	limitPlusOne := limit + 1
+	memoFind.Offset = &offset
+	memoFind.Limit = &limitPlusOne
 	memos, err := s.Store.ListMemos(ctx, memoFind)
 	if err != nil {
 		return nil, err
 	}
 
-	memoMessages := make([]*apiv2pb.Memo, len(memos))
-	for i, memo := range memos {
+	memoMessages := []*apiv2pb.Memo{}
+	nextPageToken := ""
+	if len(memos) == limitPlusOne {
+		memos = memos[:limit]
+		nextPageToken, err = getPageToken(limit, offset+limit)
+		if err != nil {
+			return nil, status.Errorf(codes.Internal, "failed to get next page token, error: %v", err)
+		}
+	}
+	for _, memo := range memos {
 		memoMessage, err := s.convertMemoFromStore(ctx, memo)
 		if err != nil {
 			return nil, errors.Wrap(err, "failed to convert memo")
 		}
-		memoMessages[i] = memoMessage
+		memoMessages = append(memoMessages, memoMessage)
 	}
 
 	response := &apiv2pb.ListMemosResponse{
-		Memos: memoMessages,
+		Memos:         memoMessages,
+		NextPageToken: nextPageToken,
 	}
 	return response, nil
 }

proto/api/v2/common.proto

@@ -11,3 +11,9 @@ enum RowStatus {
 
   ARCHIVED = 2;
 }
+
+// Used internally for obfuscating the page token.
+message PageToken {
+  int32 limit = 1;
+  int32 offset = 2;
+}

proto/api/v2/memo_service.proto

@@ -149,11 +149,12 @@ message CreateMemoResponse {
 }
 
 message ListMemosRequest {
-  // offset is the offset of the first memo to return.
-  int32 offset = 1;
+  // The maximum number of memos to return.
+  int32 page_size = 1;
 
-  // limit is the maximum number of memos to return.
-  int32 limit = 2;
+  // A page token, received from a previous `ListMemos` call.
+  // Provide this to retrieve the subsequent page.
+  string page_token = 2;
 
   // Filter is used to filter memos returned in the list.
   // Format: "creator == users/{username} && visibilities == ['PUBLIC', 'PROTECTED']"
@@ -162,6 +163,10 @@ message ListMemosRequest {
 
 message ListMemosResponse {
   repeated Memo memos = 1;
+
+  // A token, which can be sent as `page_token` to retrieve the next page.
+  // If this field is omitted, there are no subsequent pages.
+  string next_page_token = 2;
 }
 
 message GetMemoRequest {

proto/gen/api/v2/README.md

@@ -14,6 +14,8 @@
     - [ActivityService](#memos-api-v2-ActivityService)
   
 - [api/v2/common.proto](#api_v2_common-proto)
+    - [PageToken](#memos-api-v2-PageToken)
+  
     - [RowStatus](#memos-api-v2-RowStatus)
   
 - [api/v2/user_service.proto](#api_v2_user_service-proto)
@@ -331,6 +333,22 @@
 ## api/v2/common.proto
 
 
+
+<a name="memos-api-v2-PageToken"></a>
+
+### PageToken
+Used internally for obfuscating the page token.
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| limit | [int32](#int32) |  |  |
+| offset | [int32](#int32) |  |  |
+
+
+
+
+
  
 
 
@@ -2127,8 +2145,8 @@
 
 | Field | Type | Label | Description |
 | ----- | ---- | ----- | ----------- |
-| offset | [int32](#int32) |  | offset is the offset of the first memo to return. |
-| limit | [int32](#int32) |  | limit is the maximum number of memos to return. |
+| page_size | [int32](#int32) |  | The maximum number of memos to return. |
+| page_token | [string](#string) |  | A page token, received from a previous `ListMemos` call. Provide this to retrieve the subsequent page. |
 | filter | [string](#string) |  | Filter is used to filter memos returned in the list. Format: &#34;creator == users/{username} &amp;&amp; visibilities == [&#39;PUBLIC&#39;, &#39;PROTECTED&#39;]&#34; |
 
 
@@ -2145,6 +2163,7 @@
 | Field | Type | Label | Description |
 | ----- | ---- | ----- | ----------- |
 | memos | [Memo](#memos-api-v2-Memo) | repeated |  |
+| next_page_token | [string](#string) |  | A token, which can be sent as `page_token` to retrieve the next page. If this field is omitted, there are no subsequent pages. |
 
 
 

proto/gen/api/v2/common.pb.go

@@ -69,27 +69,86 @@ func (RowStatus) EnumDescriptor() ([]byte, []int) {
 	return file_api_v2_common_proto_rawDescGZIP(), []int{0}
 }
 
+// Used internally for obfuscating the page token.
+type PageToken struct {
+	state         protoimpl.MessageState
+	sizeCache     protoimpl.SizeCache
+	unknownFields protoimpl.UnknownFields
+
+	Limit  int32 `protobuf:"varint,1,opt,name=limit,proto3" json:"limit,omitempty"`
+	Offset int32 `protobuf:"varint,2,opt,name=offset,proto3" json:"offset,omitempty"`
+}
+
+func (x *PageToken) Reset() {
+	*x = PageToken{}
+	if protoimpl.UnsafeEnabled {
+		mi := &file_api_v2_common_proto_msgTypes[0]
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		ms.StoreMessageInfo(mi)
+	}
+}
+
+func (x *PageToken) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*PageToken) ProtoMessage() {}
+
+func (x *PageToken) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v2_common_proto_msgTypes[0]
+	if protoimpl.UnsafeEnabled && x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use PageToken.ProtoReflect.Descriptor instead.
+func (*PageToken) Descriptor() ([]byte, []int) {
+	return file_api_v2_common_proto_rawDescGZIP(), []int{0}
+}
+
+func (x *PageToken) GetLimit() int32 {
+	if x != nil {
+		return x.Limit
+	}
+	return 0
+}
+
+func (x *PageToken) GetOffset() int32 {
+	if x != nil {
+		return x.Offset
+	}
+	return 0
+}
+
 var File_api_v2_common_proto protoreflect.FileDescriptor
 
 var file_api_v2_common_proto_rawDesc = []byte{
 	0x0a, 0x13, 0x61, 0x70, 0x69, 0x2f, 0x76, 0x32, 0x2f, 0x63, 0x6f, 0x6d, 0x6d, 0x6f, 0x6e, 0x2e,
 	0x70, 0x72, 0x6f, 0x74, 0x6f, 0x12, 0x0c, 0x6d, 0x65, 0x6d, 0x6f, 0x73, 0x2e, 0x61, 0x70, 0x69,
-	0x2e, 0x76, 0x32, 0x2a, 0x41, 0x0a, 0x09, 0x52, 0x6f, 0x77, 0x53, 0x74, 0x61, 0x74, 0x75, 0x73,
-	0x12, 0x1a, 0x0a, 0x16, 0x52, 0x4f, 0x57, 0x5f, 0x53, 0x54, 0x41, 0x54, 0x55, 0x53, 0x5f, 0x55,
-	0x4e, 0x53, 0x50, 0x45, 0x43, 0x49, 0x46, 0x49, 0x45, 0x44, 0x10, 0x00, 0x12, 0x0a, 0x0a, 0x06,
-	0x41, 0x43, 0x54, 0x49, 0x56, 0x45, 0x10, 0x01, 0x12, 0x0c, 0x0a, 0x08, 0x41, 0x52, 0x43, 0x48,
-	0x49, 0x56, 0x45, 0x44, 0x10, 0x02, 0x42, 0xa3, 0x01, 0x0a, 0x10, 0x63, 0x6f, 0x6d, 0x2e, 0x6d,
-	0x65, 0x6d, 0x6f, 0x73, 0x2e, 0x61, 0x70, 0x69, 0x2e, 0x76, 0x32, 0x42, 0x0b, 0x43, 0x6f, 0x6d,
-	0x6d, 0x6f, 0x6e, 0x50, 0x72, 0x6f, 0x74, 0x6f, 0x50, 0x01, 0x5a, 0x30, 0x67, 0x69, 0x74, 0x68,
-	0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x75, 0x73, 0x65, 0x6d, 0x65, 0x6d, 0x6f, 0x73, 0x2f,
-	0x6d, 0x65, 0x6d, 0x6f, 0x73, 0x2f, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x2f, 0x67, 0x65, 0x6e, 0x2f,
-	0x61, 0x70, 0x69, 0x2f, 0x76, 0x32, 0x3b, 0x61, 0x70, 0x69, 0x76, 0x32, 0xa2, 0x02, 0x03, 0x4d,
-	0x41, 0x58, 0xaa, 0x02, 0x0c, 0x4d, 0x65, 0x6d, 0x6f, 0x73, 0x2e, 0x41, 0x70, 0x69, 0x2e, 0x56,
-	0x32, 0xca, 0x02, 0x0c, 0x4d, 0x65, 0x6d, 0x6f, 0x73, 0x5c, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x32,
-	0xe2, 0x02, 0x18, 0x4d, 0x65, 0x6d, 0x6f, 0x73, 0x5c, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x32, 0x5c,
-	0x47, 0x50, 0x42, 0x4d, 0x65, 0x74, 0x61, 0x64, 0x61, 0x74, 0x61, 0xea, 0x02, 0x0e, 0x4d, 0x65,
-	0x6d, 0x6f, 0x73, 0x3a, 0x3a, 0x41, 0x70, 0x69, 0x3a, 0x3a, 0x56, 0x32, 0x62, 0x06, 0x70, 0x72,
-	0x6f, 0x74, 0x6f, 0x33,
+	0x2e, 0x76, 0x32, 0x22, 0x39, 0x0a, 0x09, 0x50, 0x61, 0x67, 0x65, 0x54, 0x6f, 0x6b, 0x65, 0x6e,
+	0x12, 0x14, 0x0a, 0x05, 0x6c, 0x69, 0x6d, 0x69, 0x74, 0x18, 0x01, 0x20, 0x01, 0x28, 0x05, 0x52,
+	0x05, 0x6c, 0x69, 0x6d, 0x69, 0x74, 0x12, 0x16, 0x0a, 0x06, 0x6f, 0x66, 0x66, 0x73, 0x65, 0x74,
+	0x18, 0x02, 0x20, 0x01, 0x28, 0x05, 0x52, 0x06, 0x6f, 0x66, 0x66, 0x73, 0x65, 0x74, 0x2a, 0x41,
+	0x0a, 0x09, 0x52, 0x6f, 0x77, 0x53, 0x74, 0x61, 0x74, 0x75, 0x73, 0x12, 0x1a, 0x0a, 0x16, 0x52,
+	0x4f, 0x57, 0x5f, 0x53, 0x54, 0x41, 0x54, 0x55, 0x53, 0x5f, 0x55, 0x4e, 0x53, 0x50, 0x45, 0x43,
+	0x49, 0x46, 0x49, 0x45, 0x44, 0x10, 0x00, 0x12, 0x0a, 0x0a, 0x06, 0x41, 0x43, 0x54, 0x49, 0x56,
+	0x45, 0x10, 0x01, 0x12, 0x0c, 0x0a, 0x08, 0x41, 0x52, 0x43, 0x48, 0x49, 0x56, 0x45, 0x44, 0x10,
+	0x02, 0x42, 0xa3, 0x01, 0x0a, 0x10, 0x63, 0x6f, 0x6d, 0x2e, 0x6d, 0x65, 0x6d, 0x6f, 0x73, 0x2e,
+	0x61, 0x70, 0x69, 0x2e, 0x76, 0x32, 0x42, 0x0b, 0x43, 0x6f, 0x6d, 0x6d, 0x6f, 0x6e, 0x50, 0x72,
+	0x6f, 0x74, 0x6f, 0x50, 0x01, 0x5a, 0x30, 0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f,
+	0x6d, 0x2f, 0x75, 0x73, 0x65, 0x6d, 0x65, 0x6d, 0x6f, 0x73, 0x2f, 0x6d, 0x65, 0x6d, 0x6f, 0x73,
+	0x2f, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x2f, 0x67, 0x65, 0x6e, 0x2f, 0x61, 0x70, 0x69, 0x2f, 0x76,
+	0x32, 0x3b, 0x61, 0x70, 0x69, 0x76, 0x32, 0xa2, 0x02, 0x03, 0x4d, 0x41, 0x58, 0xaa, 0x02, 0x0c,
+	0x4d, 0x65, 0x6d, 0x6f, 0x73, 0x2e, 0x41, 0x70, 0x69, 0x2e, 0x56, 0x32, 0xca, 0x02, 0x0c, 0x4d,
+	0x65, 0x6d, 0x6f, 0x73, 0x5c, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x32, 0xe2, 0x02, 0x18, 0x4d, 0x65,
+	0x6d, 0x6f, 0x73, 0x5c, 0x41, 0x70, 0x69, 0x5c, 0x56, 0x32, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65,
+	0x74, 0x61, 0x64, 0x61, 0x74, 0x61, 0xea, 0x02, 0x0e, 0x4d, 0x65, 0x6d, 0x6f, 0x73, 0x3a, 0x3a,
+	0x41, 0x70, 0x69, 0x3a, 0x3a, 0x56, 0x32, 0x62, 0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
 }
 
 var (
@@ -105,8 +164,10 @@ func file_api_v2_common_proto_rawDescGZIP() []byte {
 }
 
 var file_api_v2_common_proto_enumTypes = make([]protoimpl.EnumInfo, 1)
+var file_api_v2_common_proto_msgTypes = make([]protoimpl.MessageInfo, 1)
 var file_api_v2_common_proto_goTypes = []interface{}{
-	(RowStatus)(0), // 0: memos.api.v2.RowStatus
+	(RowStatus)(0),    // 0: memos.api.v2.RowStatus
+	(*PageToken)(nil), // 1: memos.api.v2.PageToken
 }
 var file_api_v2_common_proto_depIdxs = []int32{
 	0, // [0:0] is the sub-list for method output_type
@@ -121,19 +182,34 @@ func file_api_v2_common_proto_init() {
 	if File_api_v2_common_proto != nil {
 		return
 	}
+	if !protoimpl.UnsafeEnabled {
+		file_api_v2_common_proto_msgTypes[0].Exporter = func(v interface{}, i int) interface{} {
+			switch v := v.(*PageToken); i {
+			case 0:
+				return &v.state
+			case 1:
+				return &v.sizeCache
+			case 2:
+				return &v.unknownFields
+			default:
+				return nil
+			}
+		}
+	}
 	type x struct{}
 	out := protoimpl.TypeBuilder{
 		File: protoimpl.DescBuilder{
 			GoPackagePath: reflect.TypeOf(x{}).PkgPath(),
 			RawDescriptor: file_api_v2_common_proto_rawDesc,
 			NumEnums:      1,
-			NumMessages:   0,
+			NumMessages:   1,
 			NumExtensions: 0,
 			NumServices:   0,
 		},
 		GoTypes:           file_api_v2_common_proto_goTypes,
 		DependencyIndexes: file_api_v2_common_proto_depIdxs,
 		EnumInfos:         file_api_v2_common_proto_enumTypes,
+		MessageInfos:      file_api_v2_common_proto_msgTypes,
 	}.Build()
 	File_api_v2_common_proto = out.File
 	file_api_v2_common_proto_rawDesc = nil

web/src/helpers/consts.ts

@@ -12,3 +12,5 @@ export const TAB_SPACE_WIDTH = 2;
 
 // default fetch memo amount
 export const DEFAULT_MEMO_LIMIT = 10;
+
+export const DEFAULT_LIST_MEMOS_PAGE_SIZE = 10;

web/src/pages/Explore.tsx

 import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import MemoFilter from "@/components/MemoFilter";
@@ -18,12 +18,12 @@ const Explore = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const [isComplete, setIsComplete] = useState(false);
+  const nextPageTokenRef = useRef<string | undefined>(undefined);
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
 
   useEffect(() => {
-    memoList.reset();
+    nextPageTokenRef.current = undefined;
     fetchMemos();
   }, [tagQuery, textQuery]);
 
@@ -41,12 +41,12 @@ const Explore = () => {
     }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
+      pageSize: DEFAULT_MEMO_LIMIT,
       filter: filters.join(" && "),
-      limit: DEFAULT_MEMO_LIMIT,
-      offset: memoList.size(),
+      pageToken: nextPageTokenRef.current,
     });
     setIsRequesting(false);
-    setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
+    nextPageTokenRef.current = data.nextPageToken;
   };
 
   return (
@@ -61,7 +61,7 @@ const Explore = () => {
           <div className="flex flex-col justify-start items-center w-full my-4">
             <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
           </div>
-        ) : isComplete ? (
+        ) : !nextPageTokenRef.current ? (
           sortedMemos.length === 0 && (
             <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
               <Empty />

web/src/pages/Home.tsx

 import { Button } from "@mui/joy";
 import classNames from "classnames";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import HomeSidebar from "@/components/HomeSidebar";
 import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
@@ -25,7 +25,7 @@ const Home = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const [isComplete, setIsComplete] = useState(false);
+  const nextPageTokenRef = useRef<string | undefined>(undefined);
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
@@ -33,7 +33,7 @@ const Home = () => {
     .sort((a, b) => Number(b.pinned) - Number(a.pinned));
 
   useEffect(() => {
-    memoList.reset();
+    nextPageTokenRef.current = undefined;
     fetchMemos();
   }, [tagQuery, textQuery]);
 
@@ -51,12 +51,12 @@ const Home = () => {
     }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
+      pageSize: DEFAULT_MEMO_LIMIT,
       filter: filters.join(" && "),
-      limit: DEFAULT_MEMO_LIMIT,
-      offset: memoList.size(),
+      pageToken: nextPageTokenRef.current,
     });
     setIsRequesting(false);
-    setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
+    nextPageTokenRef.current = data.nextPageToken;
   };
 
   return (
@@ -78,7 +78,7 @@ const Home = () => {
               <div className="flex flex-col justify-start items-center w-full my-4">
                 <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
               </div>
-            ) : isComplete ? (
+            ) : !nextPageTokenRef.current ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />

web/src/pages/Timeline.tsx

 import { Button, Divider, IconButton } from "@mui/joy";
 import classNames from "classnames";
 import { sum } from "lodash-es";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
@@ -53,13 +53,13 @@ const Timeline = () => {
   const [activityStats, setActivityStats] = useState<Record<string, number>>({});
   const [selectedDay, setSelectedDay] = useState<string | undefined>();
   const [isRequesting, setIsRequesting] = useState(true);
-  const [isComplete, setIsComplete] = useState(false);
+  const nextPageTokenRef = useRef<string | undefined>(undefined);
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
   const groupedByMonth = groupByMonth(activityStats, sortedMemos);
 
   useEffect(() => {
-    memoList.reset();
+    nextPageTokenRef.current = undefined;
     fetchMemos();
   }, [selectedDay, tagQuery, textQuery]);
 
@@ -105,12 +105,12 @@ const Timeline = () => {
     }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
+      pageSize: DEFAULT_MEMO_LIMIT,
       filter: filters.join(" && "),
-      limit: DEFAULT_MEMO_LIMIT,
-      offset: memoList.size(),
+      pageToken: nextPageTokenRef.current,
     });
     setIsRequesting(false);
-    setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
+    nextPageTokenRef.current = data.nextPageToken;
   };
 
   const handleNewMemo = () => {
@@ -183,7 +183,7 @@ const Timeline = () => {
               <div className="flex flex-col justify-start items-center w-full my-4">
                 <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
               </div>
-            ) : isComplete ? (
+            ) : !nextPageTokenRef.current ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />

web/src/pages/UserProfile.tsx

 import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
@@ -25,7 +25,7 @@ const UserProfile = () => {
   const memoStore = useMemoStore();
   const memoList = useMemoList();
   const [isRequesting, setIsRequesting] = useState(true);
-  const [isComplete, setIsComplete] = useState(false);
+  const nextPageTokenRef = useRef<string | undefined>(undefined);
   const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
   const sortedMemos = memoList.value
     .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
@@ -54,7 +54,7 @@ const UserProfile = () => {
       return;
     }
 
-    memoList.reset();
+    nextPageTokenRef.current = undefined;
     fetchMemos();
   }, [user, tagQuery, textQuery]);
 
@@ -76,12 +76,12 @@ const UserProfile = () => {
     }
     setIsRequesting(true);
     const data = await memoStore.fetchMemos({
+      pageSize: DEFAULT_MEMO_LIMIT,
       filter: filters.join(" && "),
-      limit: DEFAULT_MEMO_LIMIT,
-      offset: memoList.size(),
+      pageToken: nextPageTokenRef.current,
     });
     setIsRequesting(false);
-    setIsComplete(data.length < DEFAULT_MEMO_LIMIT);
+    nextPageTokenRef.current = data.nextPageToken;
   };
 
   return (
@@ -112,7 +112,7 @@ const UserProfile = () => {
                 <div className="flex flex-col justify-start items-center w-full my-4">
                   <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
                 </div>
-              ) : isComplete ? (
+              ) : !nextPageTokenRef.current ? (
                 sortedMemos.length === 0 && (
                   <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                     <Empty />

web/src/store/v1/memo.ts

@@ -16,13 +16,13 @@ export const useMemoStore = create(
     setState: (state: State) => set(state),
     getState: () => get(),
     fetchMemos: async (request: Partial<ListMemosRequest>) => {
-      const { memos } = await memoServiceClient.listMemos(request);
+      const { memos, nextPageToken } = await memoServiceClient.listMemos(request);
       const memoMap = get().memoMapById;
       for (const memo of memos) {
         memoMap[memo.id] = memo;
       }
       set({ memoMapById: memoMap });
-      return memos;
+      return { memos, nextPageToken };
     },
     getOrFetchMemoById: async (id: number, options?: { skipCache?: boolean; skipStore?: boolean }) => {
       const memoMap = get().memoMapById;