title: How do I fetch comments with Laravel Pagination that are not redundant?
body: <p><strong>My main problem:</strong> </p>
  
  <p>If user writes a comment and <strong><em>then</em></strong> decides to load more comments, he will get to see at least <strong>one redundant comment</strong>.</p>
  
  <p><strong>Causation:</strong></p>
  
  <p>Via Laravel Pagination the script loads via Axios the last 10 items. After adding one comment and fetching again the next 10 items, the "order" is shifted of one element. Thus, getting one repeated element.</p>
  
  <hr>
  
  <p><strong>Tries to fix it:</strong></p>
  
  <p><strong><em>First Try:</em></strong> 
  I tried with Array.prototype.includes() or Lodash Includes:</p>
  
  <pre><code> data(){
      return { items: [] };
   }
   ...
   addWithoutRedudancy(newItems){
      for(let item of newItems){
          if( ! _.includes( this.items, item ) ) this.items.push(item);
      }
   }
  </code></pre>
  
  <p><strong>Occurring problems:</strong> </p>
  
  <ol>
  <li><p>Even though I seemingly have two of the same objects, I get in my console false if I check: </p>
  
  <pre><code>$vm0.items[10] == $vm0.items[11] //False even though objects look the same, and actually are (looking to all properties)
  </code></pre>
  
  <p>That is a huge problem, because Includes can't find the redundant Object! I've no clue why these objects are saved differently. Perhaps because I fetch them over axios on two different timings?</p></li>
  <li><p>But even if it would work, after the user wrote for example 8 new comments, he would get only 2 new comments from the pagination (controller) back, but should get of course the next 10 comments.</p></li>
  </ol>
  
  <p><strong><em>Second Try</em></strong></p>
  
  <pre><code>/**
   * Fetch all relevant comments.
   *
   * @param string $username
   * @param Selllink $selllink
   */
  public function index($username, $selllink)
  {
      //Route::prefix('/{username}/{selllink}
      //Sellink gets the model of sell and loads all comments to that sell.
      //get me the latest first (we want to see the current comments)
      //take only 10 coments with paginatation
  
      return $selllink-&gt;sell-&gt;comments()
                  -&gt;latest()
                  -&gt;offset($addedCommentsNumber??) //that can't work...
                  -&gt;paginate(10);
  }
  </code></pre>
  
  <p><strong>Occurring problems:</strong> 
     I cannot really offset the whole table. I need to offset the paginated ones and add the missing ones again.</p>
  
  <hr>
  
  <p><strong>Conclusion</strong></p>
  
  <p>There must be a much better way to do this. But I just don't know how. </p>
  
  <hr>
  
  <p><strong>More details explanation (if needed):</strong></p>
  
  <p>I have a <strong>Vue Comment Component</strong> that fetches the data from my <strong>CommentController</strong> with Pagination:</p>
  
  <pre><code>methods: {
          fetch(){
              axios.get(this.url()).then(this.refresh);
          },
          url() {
              this.page++;
              return `${location.pathname}/comments?page=${this.page}`;
          },
          refresh({data}){
              this.dataSet = data;
              this.addWithoutRedudancy(data.data);
          },
  }
  </code></pre>
  
  <p>If the users want to get <strong>more</strong> Comments, they just click on the "load more" button and I'm getting the comments loaded</p>