# Fetching Cockpit API collection with Axios returns null first?

**URL:** https://discourse.getcockpit.com/t/fetching-cockpit-api-collection-with-axios-returns-null-first/911
**Category:** Support
**Created:** [July 7, 2019, 6:44pm UTC](https://discourse.getcockpit.com/t/fetching-cockpit-api-collection-with-axios-returns-null-first/911 "2019-07-07T18:44:23Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Galanthus](https://avatars.discourse-cdn.com/v4/letter/g/a3d4f5/32.png) [@Galanthus](https://discourse.getcockpit.com/u/Galanthus)
#### Post date: [July 7, 2019, 6:44pm UTC](https://discourse.getcockpit.com/t/fetching-cockpit-api-collection-with-axios-returns-null-first/911/1 "2019-07-07T18:44:23Z")

</div>

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