Axios API Calls
Mock API calls
Axios API call using SWR
Product values have been initialized using useSWR with Axios fetcher like below:
src/api/products.ts
export function useGetRelatedProducts(id: string) {
const URL = [endpoints.related, { id, endpoints: 'products' }];
const { data, isLoading, error, isValidating } = useSWR(URL, fetcherPost, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
});
const memoizedValue = useMemo(
() => ({
relatedProducts: data as Products[],
relatedProductsLoading: isLoading,
relatedProductsError: error,
relatedProductsValidating: isValidating,
relatedProductsEmpty: !isLoading && !data?.length
}),
[data, error, isLoading, isValidating]
);
return memoizedValue;
}
src/api/products.js
export function useGetRelatedProducts(id) {
const URL = [endpoints.related, { id, endpoints: 'products' }];
const { data, isLoading, error, isValidating } = useSWR(URL, fetcherPost, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
});
const memoizedValue = useMemo(
() => ({
relatedProducts: data,
relatedProductsLoading: isLoading,
relatedProductsError: error,
relatedProductsValidating: isValidating,
relatedProductsEmpty: !isLoading && !data?.length
}),
[data, error, isLoading, isValidating]
);
return memoizedValue;
}
You can mutate the product list with Axios call, like below,
src/api/products.ts
export async function productFilter(filter: ProductsFilter) {
const newProducts = await axios.post(endpoints.key + endpoints.filter, { filter });
// to update local state based on key
mutate(
endpoints.key + endpoints.list,
(currentProducts: any) => {
return {
...currentProducts,
products: newProducts.data
};
},
false
);
}
src/api/products.js
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 next.config.js
file and edit NEXT_APP_API_URL.
next.config.js
env: {
NEXT_APP_API_URL:
..
}
Axios has been configured in the folder src\utils\axios
Example 1: With baseUrl
src/utils/axios.ts
import axios, { AxiosRequestConfig } from 'axios';
const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' });
// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //
axiosServices.interceptors.request.use(
async (config) => {
const accessToken = localStorage.getItem('serviceToken');
if (accessToken) {
config.headers['Authorization'] = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
src/utils/axios.js
import axios from 'axios';
const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' });
// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //
axiosServices.interceptors.request.use(
async (config) => {
const accessToken = localStorage.getItem('serviceToken');
if (accessToken) {
config.headers['Authorization'] = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
Example 2: Without baseUrl
You can set the entire URL in Axios request. Do not use common Axios instances src\utils\axios
instead use directly Axios library.
src\utils\axios.ts
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>
);
}
src\utils\axios.js
import { useCallback, useState } from 'react';
// third-party
import axios from 'axios';
// ==============================|| 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, index) => (
<div key={index}>{user.name}</div>
))}
</div>
);
}
Last updated