Axios API Calls

Search…
Axios API Calls
Mock API calls
Mock Calls
Berry uses fack/mock data to render some pages and actions. Mocking has been achieved with help of Axios. It helps users to do minimal changes to load live data. Users just need to change the mock API URL to the Live service URL.
How does it work?
Axios has been configured in the folder ..src\utils\axios.js
To use Axios on a page, you need to import it and make a call. After that, you need to make calls to Axios using axios.get('path') or axios.post('path') see below implementation.
axios.js
1
...
2
import axios from '../../../../utils/axios'; // 1. import axios
3
...
4
​
5
const CardListPage = () => {
6
    const [data, setData] = React.useState([]);
7
    
8
    ...
9
    ...
10
    
11
    // get dummy data
12
    const getData = async () => {
13
        const response = await axios.get('/api/chat/users'); // 2. change it to live service URL
14
        setData(response.data.users);
15
        return response.data.users;
16
    };
17
   
18
    ...
19
    ...
20
    
21
    // 3. call to get data
22
    React.useEffect(() => {
23
        getData();
24
    }, []);
25
    
26
    ...
27
    ...
28
    
29
    // use data in HTML
30
    {Object.keys(data).map((key, index) => {
31
        return (
32
            <React.Fragment key={index}>
33
            
34
            ...
35
            ...
36
            
37
            </React.Fragment>
38
            );
39
    ...
40
    ...
41
    
42
        })
43
    };
44
    
45
};
46
​
47
export default SamplePage;
Copied!
Berry has all dummy data in folder src\_mockApis. For API, api/chat/users, following data configured in ..\src_mockApis\chat\index.js :
\chat\index.js
1
import services from './../../utils/mockAdapter';
2
​
3
...
4
​
5
let users = [
6
    {
7
        id: 1,
8
        name: 'Alene',
9
        company: 'ABC Pvt Ltd',
10
        role: 'Sr. Customer Manager',
11
        work_email: '[email protected]',
12
        personal_email: '[email protected]',
13
        work_phone: '380-293-0177',
14
        personal_phone: '380-293-0177',
15
        location: 'Port Narciso',
16
        avatar: 'avatar-1.png',
17
        status: 'Laboris non ad et',
18
        lastMessage: '2h ago',
19
        birthdayText: 'happy Birthday Alene',
20
        unReadChatCount: 2,
21
        online_status: 'available'
22
    },
23
    {
24
        id: 2,
25
        name: 'Keefe',
26
        company: 'ABC Pvt Ltd',
27
        role: 'Dynamic Operations Officer',
28
        work_email: '[email protected]',
29
        personal_email: '[email protected]',
30
        work_phone: '253-418-5940',
31
        personal_phone: '253-418-5940',
32
        location: 'Afghanistan',
33
        avatar: 'avatar-2.png',
34
        status: 'Laboris non ad et',
35
        lastMessage: '1:20 AM',
36
        birthdayText: 'happy Birthday Keefe',
37
        unReadChatCount: 3,
38
        online_status: 'available'
39
    }
40
    ...
41
    ...
42
];
43
...
44
...
45
];
46
services.onGet('/api/chat/users').reply(200, {users: users});
47
...
48
...
49
});
Copied!
You can configure the same for postmethods as well.
Next JS
Next js has a different mechanism to handle API. We have created src/pages/api folder where all the API stays. Whenever a request happened to API, this will be called. for more about API in nextJS, please refer: https://nextjs.org/docs/api-routes/introduction​
Authentication
Routing
Last modified 2mo ago
Copy link
Contents
Mock Calls
How does it work?
Next JS