Fetching Cockpit API collection with Axios returns null first?

Support
1

Hi there,

I really love the API! Gives me a lot of freedom to do whatever I want and how I want. I have noticed that when fetching a collection API data with Axios and useEffect in React and I console log the data it returns NULL NULL and followed by the object.

Because of this I always need a check if(!isLoading && dataLoaded) { show data }.

The problem is, I am not able to use object destructuring of the fields and unique values outside the check using multiple functions.

It will always return “undefined” on render.

is there a workaround or specific way of fixing this?

import React from 'react';

import { PAGE_ABOUT, API_URL } from 'constants/import';

import Header from './sections/Header';
import Main from './sections/Main';
import Aside from './sections/Aside';

import { useHttp } from 'hooks/http';

const About = () => {
    const [isLoading, about] = useHttp(PAGE_ABOUT, []);

    if (!isLoading && about) {
        return (
            <section className="about">
                <div className="row">
                    <Header
                        featuredImage={API_URL + about.page_featured_image.path}
                        authorImage={API_URL + about.page_author_image.path}
                        authorImageMeta={about.page_author_image.meta.title}
                        title={about.about_title}
                        subtitle={about.about_subtitle}
                    />

                    <Main
                        title={about.page_title}
                        content={about.page_content}
                    />

                    <Aside
                        title={about.about_title}
                        content={about.about_content}
                    />
                </div>
            </section>
        );
    }
};

export default React.memo(About);