How fetch data in React without max length array limit?

Question

I'm using axios to fetch data from headless Drupal 8 to my React component via the JSONAPI Drupal module.
When I make exactly the same fetch request through Postman (URL and headers are the same), I get and array of 300+ objects, but when fetching from React, the response is limited to 50 objects.
What limits my array length and how to override the limit to get the full array?
This request is placed in componentDidMount() in App.js of my React project, created by Create-React-App:

axios({
            method: 'get',
            url: `${prodURL}/jsonapi/node/puzzle/?fields[node--puzzle]=field_filestack_handle,created&filter[eventfilter][condition][path]=field_event_reference.field_event_access_code&filter[eventfilter][condition][value]=${eventAccessCode}&sort=-created`,

            auth: {
                username: `${fetchUsername}`,
                password: `${fetchPassword}`
            },
            headers: {
                'Accept': 'application/vnd.api+json',
                'Content-Type': 'application/vnd.api+json',
            }
        })
            .then(response => {
                this.setState({
                    data: response.data.data,
                    isLoading: false
                })
            })
            .catch(error => console.log(error));
    }

Please show your postman request details and the code that makes the fetch call. If you have access to the server, then its easy to debug there by checking what you receive. — Panther
– Panther, Commented Oct 13, 2018 at 8:30
Just added my code. As I've mentioned, it is the same request I use in Postman, but in React it limits array length to 50. — Max Zviagintsev
– Max Zviagintsev, Commented Oct 13, 2018 at 8:35
Please show us how you query it using postman, is it the same url? are the values for your parameters the same? what if you hardcode the url in axios to test that everything is working correctly? As far as I know Axios doesn't filter results (I've always used it and I always have to filter in the backend) so my thought here is that there must be some parameter that is filtering your result in that url. — c-chavez
– c-chavez, Commented Oct 13, 2018 at 8:48
I can't expose auth data publicly but if you use this URL in Postman without auth header, you'll get the array of the same number of objects (the hidden values are not relevant since we are talking about max array length). partypics.gallery/jsonapi/node/puzzle/… — Max Zviagintsev
– Max Zviagintsev, Commented Oct 13, 2018 at 9:17

Max Zviagintsev · Accepted Answer · 2018-10-13 20:23:18Z

1

JSON API Drupal module limited the response. I should have used Pagination

answered Oct 13, 2018 at 20:23

Max Zviagintsev

631 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bojan Ivanac · Accepted Answer · 2018-10-13 11:55:56Z

0

You can use lodash chunk to split the array into an array of arrays that have the length of 50.

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

answered Oct 13, 2018 at 11:55

Bojan Ivanac

1,1708 silver badges17 bronze badges

Collectives™ on Stack Overflow

How fetch data in React without max length array limit?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related