Axios 从 GET 请求响应中设置 URL 为 GET 请求

Question

This question is very similar to This question

I have set up a Vue page with Laravel and showing all posts with a help of a GET request. I am also listening to a Laravel ECHO event and unshifting the value to the all posts array making it appear on top.

I have set up the infinite scroll and paginating 5 results per page using this package . Results appear on the page and pushing to the array from the listener also works. However, when infinite scroll loads the 2nd results page, the 6th result is duplicated.

The aforementioned package accepts next_cursor an offset value as the parameter instead of page=2 so it exactly loads the value without any duplications.

Controller.php

    public function pusherGet(Request $request) {
        $jobs = Job::orderBy('id','desc')->cursorPaginate();        
        return response()->json($jobs);
    }

Vue file

    <template>
        <div>
            <h3 class="text-center">All Jobs</h3><br/>
            <div class="container">
                <div class="card" v-for="(job,index) in jobs" :key="index">
                    <div class="card-body">
                        <h4 class="card-title">{{ job.id }}</h4>
                        <p class="card-text">{{ job.request_type}}</p>
                    </div>
                </div>    
            </div>
            <infinite-loading  @infinite="getJob"></infinite-loading>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                   page:1,
                   jobs: [],                
                }
            },       
            mounted() {           
                this.listenNewJobs();  
            },
            created() {
           
            },
            methods: {            
                listenNewJobs() {
                    Echo.channel('chat-room.1')
                        .listen('JobCreated', (e) => {
                            console.log(e);                        
                            this.jobs.unshift(e.job);                            
                        });
                    },
                    getJob($state) {
                        axios.get('getjobs', {                
                            params: {
                                page: this.page,                        
                            },
                       }).then(({data})=> {
                           console.log(data) 
                           if(data.data.length) {
                               this.page += 1;
                               this.jobs.push(...data.data)
                               $state.loaded();
                            } else {
                            $state.complete();
                        }
                    });                     
                }
            }        
        }
    </script>

Results Json

    {
        data: Array(5), path: "getjobs?page=1", previous_cursor: "100", next_cursor: "96", per_page: 5, …}
        data: (5) [{…}, {…}, {…}, {…}, {…}]
        next_cursor: "96" // this is the parameter which i should attach to the GET request to paginate correct results
        next_page_url: "getjobs?page=1&next_cursor=96"
path: "getjobs?page=1"
        per_page: 5
        prev_page_url: "getjobs?page=1&previous_cursor=100"
previous_cursor: "100"
        __proto__: Object

Any help would be greatly appreciated.

Edit: How to Set the URL for the GET request to paginate the results from the GET request response for paginated results to avoid 2nd page result duplication?

Answer 1

Try the following:

<script>
  export default {
    data() {
      return {
        jobs: [],
        isInitialLoaded: false,
        currentPage: 1,
        lastPage: 0,
      }
    },
    mounted() {
      this.listenNewJobs();
    },
    created() {
      //
    },
    methods: {
      listenNewJobs() {
        Echo.channel('chat-room.1')
          .listen('JobCreated', (e) => {
              console.log(e);
              this.jobs.unshift(e.job);
        });
      },
      async getJob($state){
        await this.fetchData().then((response) => {
          this.lastPage = response.data.last_page;
          if (response.data.data.length > 0) {
            response.data.data.forEach((item) => {
              const exists = this.jobs.find((job) => job.id == item.id);
              if (!exists) {
                // this.jobs.unshift(item); // Add to front of array
                this.jobs.push(item);
              }
            });
            if (this.currentPage - 1 === this.lastPage) {
              this.currentPage = 2;
              $state.complete();
            } else {
              this.currentPage += 1;
            }
            $state.loaded();
          } else {
            this.currentPage = 2;
            $state.complete();
          }
        });
        this.isInitialLoaded = true;
      },
      fetchData() {
        const url = this.isInitialLoaded ? `/getjobs?page=${this.currentPage}` : `/getjobs`;
        return axios.get(url);
      },
    }
  }
</script>