title: Laravel load read and unread messages for chat application
body: <p>I am developing a chat application using <code>Laravel and Vue</code>.</p>
  
  <p>When the chat opens, page scrolls down to the bottom of the page with latest 50 messages.</p>
  
  <p>I have a model <code>message</code> and <code>message_notifications</code> and <code>message_notifications</code> has 1 row for each user in the group and <code>is_seen</code> flag. That is how I can get unread message by user.</p>
  
  <p><code>Messages</code> table has following fields</p>
  
  <pre><code>id| body | conversation_id | user_id
  </code></pre>
  
  <p><code>MessageNotification</code> table has following fields</p>
  
  <pre><code>id | message_id | conversation_id | user_id | is_seen 
  </code></pre>
  
  <p>I have implemented the infinite top loading using the <code>paginator</code>. So when user reaches to the top of the scroll <code>limit 25 offset 0</code> becomes <code>limit 25 offset 25</code> and so on. </p>
  
  <p>Now I am trying to implement any common chat application feature, when user opens a chat group conversation, load all unread messages and load last n number of message before the unread message. </p>
  
  <p>So I have a method to <code>getMessages</code> which return paginator collection ignoring the <code>is_seen</code> flag.</p>
  
  <pre><code>select `message_notification`.`id` as `notification_id`,
         `messages`.*
  from `messages`
      inner join `message_notification`
          on `message_notification`.`message_id` = `messages`.`id`
  where `messages`.`conversation_id` = 406
    and `message_notification`.`user_id` = 4
    order by mc_messages.id desc
    limit 25 offset 0
  </code></pre>
  
  <p>Now how can I load all the unread messages in a conversation along with 25 of the latest read messages?</p>
  
  <p>I tried to merge 2 collection but one of the collection will be with pagination and the other without so it doesnt work properly.</p>
  
  <p>If I send 2 collection to the <code>vue</code> and merge it on the <code>vue</code> end, pagination becomes useless as I will mark all unread messages as read on <code>mounted</code> so next time the query is fired, <code>limit 25 offset 25</code> will give some of the same data.</p>
  
  <p>How can I resolve this?</p>