Consume Api calls on pagination next and previous

[muhammadawaisshaikh]

User navigate to page 2 server Api call need to hit. Currently all the data is coming in first load which will avoid the performance and wait for the data to load

[naeem2290]

I also wanted to use the same approach, when you are working with the pagination then you have to fetch the limited records from the backend API, depends on the pageSize, no of records and current page.

But the reason to fetch the records at once is that they (Pokemon API docs) doesn't have any api endpoint to do the specific search on the basis of the name and return the response, but we wanted to filter the whole records i.e 1302 that's why I got the list at once and then performed search on the list we have stored in our store.

This is the reason, I hope you got my point.

[muhammadawaisshaikh]

`import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class PokeapiService { private apiUrl = 'https://pokeapi.co/api/v2/pokemon';

constructor(private http: HttpClient) {}

// Function to fetch 10 records per page getPokemon(page: number): Observable { const offset = (page - 1) * 10; // Calculate offset based on page return this.http.get(${this.apiUrl}?offset=${offset}&limit=10); } } `

[muhammadawaisshaikh]

See above implementation please

[naeem2290]

I got this already. I mentioned the search implementation. I know they have the api for the records per page and we can limit it. But we don't have any where we pass some specific string (Name of pokemon) and get the filtered results from them.

That's why I fetched all the records at once to apply search functionality on the complete Pokemon list.

[muhammadawaisshaikh]

👍