Axios API call using SWR
Products values has been initialized using useSWR with Axios fetcher like below:
Copy export function useGetProducts () {
const { data , isLoading , error , isValidating } = useSWR ( endpoints .key + endpoints .list , fetcher , {
revalidateIfStale : true ,
revalidateOnFocus : true ,
revalidateOnReconnect : true
});
const memoizedValue = useMemo (
() => ({
products : data ?.products ,
productsLoading : isLoading ,
productsError : error ,
productsValidating : isValidating ,
productsEmpty : ! isLoading && ! data ?. products ?. length
}) ,
[data , error , isLoading , isValidating]
);
return memoizedValue;
}
You can mutate products list with Axios call, like below,
Copy export async function productFilter (filter) {
const newProducts = await axios .post ( endpoints .key + endpoints .filter , { filter });
// to update local state based on key
mutate (
endpoints .key + endpoints .list ,
(currentProducts) => {
return {
... currentProducts ,
products : newProducts .data
};
} ,
false
);
}
Set default axios baseURL for call API
Open .env file and edit REACT_APP_API_URL.
Copy
## 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.js
Example 1: With baseUrl
Copy import { 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 >
);
}
Example 2: Without baseUrl
You can set the entire URL in Axios request. Do not use common Axios instances src\utils\axios.js
instead use directly Axios library.
Copy 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 >
);
}