Infinite Scrolling of Gmail messeges in my current Gmail API project

Question

Okay So I am sharing the code which is hard coded to 20 Emails only. I want to get list of emails untill it ends not just 20. So when I scroll I will be able to see nextPage. I know that gmail API has attribute called pagetoken but I am somehow not able to implement that.

I am using React-hooks to update the message. I am able to successfully see 20 Emails but I want to see them till end. Below is the front end of the code

   {isEmpty(messages) ? (
        <Box mt={6} display='flex' align='center' justifyContent='center'>
          <Spinner
            thickness='4px'
            speed='0.65s'
            emptyColor='gray.200'
            color='blue.500'
            size='xl'
          />
        </Box>
      ) : (
        <Box overflowY='auto'>
          {messages.map((message) => {
            const name = removeQuote(
              getHeader(message.payload.headers, "From").split("<")[0]
            );
            const subject = getHeader(message.payload.headers, "Subject");
            const msg = decodeHtml(message.snippet.substr(0, 75));
            const backgroundColor =
              message.labelIds.indexOf("UNREAD") > -1 ? "#fff" : "#E2E8F0";

            return (
              <Flex
                key={message.id}
                id={message.id}
                onClick={handleMessageClick}
                wrap='no-wrap'
                justify='space-around'
                py={2}
                bg={backgroundColor}
                borderTop='1px'
                borderBottom='1px'
                borderColor='gray.300'
                cursor='pointer'
              >
                <Avatar name={name} src='' />
                <Box w='80%'>
                  <Text fontSize='sm' color='gray.700' isTruncated>
                    {name}
                  </Text>
                  <Text
                    fontSize='md'
                    fontWeight='bold'
                    color='#3182ce'
                    isTruncated
                  >
                    {subject}
                  </Text>
                  <Text fontSize='xs' color='gray.500'>
                    {msg}
                  </Text>
                </Box>
              </Flex>
            );
          })}
        </Box>
      )}
    </Flex>

 const [message, setMessage] = useState({});

const getMessages = (labelIds = "INBOX") => {
    // Get List of 20 message's Id
    const request = window.gapi.client.gmail.users.messages.list({
      userId: "me",
      labelIds: labelIds,
      maxResults: 20,
    });

    setMessages([]);

    // Send Id list to getMessagesData to get Message Data foreach Id
    request.execute(getMessagesData);
  };

  const getMessagesData = (response) => {
    const messages = response.result.messages ? response.result.messages : [];

    messages.forEach((message) => {
      window.gapi.client.gmail.users.messages
        .get({
          userId: "me",
          id: message.id,
        })
        .then(
          (response) => {
           
            setMessages((messages) => [...messages, response.result]);
          },
          (err) => {
            console.error("getMessagesData error", err);
          }
        );
    });
  };

Answer 1

According to the docs, the nextPageToken is included in the response.

https://developers.google.com/gmail/api/v1/reference/users/messages/list#response

You can do something like this:

let nextPageToken; // add me

const getMessages = (labelIds = "INBOX") => {
    // Get List of 20 message's Id
    const request = window.gapi.client.gmail.users.messages.list({
      userId: "me",
      labelIds: labelIds,
      maxResults: 20,
      pageToken: nextPageToken,  // changed
    });
...rest of function
};

const getMessagesData = (response) => {
  nextPageToken = response.nextPageToken;  // add me
  
  const messages = response.result.messages ? response.result.messages : [];
  
  messages.forEach((message) => {
...rest of function
}

From:

function listMessages(userId, query, callback) {
  var getPageOfMessages = function(request, result) {
    request.execute(function(resp) {
      result = result.concat(resp.messages);
      var nextPageToken = resp.nextPageToken;
      if (nextPageToken) {
        request = gapi.client.gmail.users.messages.list({
          'userId': userId,
          'pageToken': nextPageToken,
          'q': query
        });
        getPageOfMessages(request, result);
      } else {
        callback(result);
      }
    });
  };
  var initialRequest = gapi.client.gmail.users.messages.list({
    'userId': userId,
    'q': query
  });
  getPageOfMessages(initialRequest, []);
}