Get all objects in an endpoint using axios if there is a pagination involved.

Question

Ok, so I have a file input with a datalist. This is the JSX inside the render function.

<Form.Input
list = 'materials' 
type = 'text'
placeholder='Material' 
name='material_id'
id='material_id'
value={material_id} 
onChange={this.onChange}
/>
  <datalist id='materials'>
  {
    returndata.map((item, i) => <option key={i} value={item.uuid}>{item.title}</option>)
  }
  </datalist>

and I have this ComponentDidMount

   componentDidMount() {
    const token = localStorage.getItem('jwt');

    const apiBaseUrl = "http://127.0.0.1:8000/api/materials";

    const config = {
     headers: {
       'Authorization': "bearer " + token,
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     }
    }

    axios.get(apiBaseUrl, config)
     .then((response) => {
         console.log(response.data);
       this.setState({
         options: response.data
       })
      })
     .catch((error) => {
       console.log(error);
      });
   }

now, that endpoint I am using in axios, only shows the first page, to be able to get the next object, I must use http://127.0.0.1:8000/api/materials/?page=2 and so on and so on.

page 1:

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Apple",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Banana",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Strawberry",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

page 2:

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Orange",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Grapes",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Kiwi",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

for example, my options only shows [Apple, Banana, Strawberry] because they are in page 1, but page 2 contains [Orange, Grapes, Kiwi], how can I show all of them in my options?

Answer 1

Since your API's for getting different page contents are different you must call all API's to get the whole data. If you needs to show 3 pages, you have to call 3 API's using axios you can do the parallel API call like this :

const api1 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=1'
      }));
const api2 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=2'
      }));
const api3 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=3'
      }));
const [api1_resp, api2_resp_api3_resp]= await Promise.all([api1, api1, api3]);

Combine api1_resp, api2_resp_api3_resp and get the whole data.