CODEWITHSUNDEEP
reactjsaxiosdrupal-8json-api
Max Zviagintsev
Max Zviagintsev

Reputation: 63

How fetch data in React without max length array limit?

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));
    }

Upvotes: 1

Views: 2898

Answers (2)

Max Zviagintsev
Max Zviagintsev

Reputation: 63

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

Upvotes: 1

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

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']]

Upvotes: 0

Related Questions