Comment on page
Axios API Calls
API calls
Open .env file and edit REACT_APP_API_URL.
.env
## Backend API URL
REACT_APP_API_URL=
You can configure the same for next.js as well.
Axios has been configured in the folder
..src\utils\axios.jsimport { useCallback, useState } from 'react';
// project-imports
import axios from 'utils/axios';
import { UserProfile } from 'types/users';
// ==============================|| AXIOS - USER ||============================== //
function UserList() {
const [users, setUsers] = useState([]);
const getUsers = useCallback(async () => {
try {
const response = await axios.get('/api/users');
setUsers(response.data.users);
} catch (error) {
console.log(error);
}
}, []);
useEffect(() => {
getUsers();
}, [getUsers]);
return (
<div>
{users.map((user: UserProfile[], index: number) => (
<div key={index}>{user.name}</div>
))}
</div>
);
}
You can set the entire URL in Axios request. Do not use common Axios instances
src\utils\axios.jsinstead use directly Axios library.import { useCallback, useState } from 'react';
// third-party
import axios from 'axios';
// project-imports
import { UserProfile } from 'types/users';
// ==============================|| AXIOS - USER ||============================== //
function UserList() {
const [users, setUsers] = useState([]);
const getUsers = useCallback(async () => {
try {
const response = await axios.get('https://www.domain-xyz.com/api/users');
setUsers(response.data.users);
} catch (error) {
console.log(error);
}
}, []);
useEffect(() => {
getUsers();
}, [getUsers]);
return (
<div>
{users.map((user: UserProfile[], index: number) => (
<div key={index}>{user.name}</div>
))}
</div>
);
}