Skip to main content

Data Fetching

Axios

Vivid brings the power of Axios and SWR to your app. You can find the configuration file in the src/plugins/axios.ts file.

src/plugins/axios.ts
import Axios from 'axios';
import { api } from '@/config';

export const axios = Axios.create(api.axios);
tip

Read more about Configuration

By default, Vivid configures axios interceptor to automatically add the Authorization header to every request & redirects to the login page if the request returns 401 status code.

src/plugins/axios.ts
axios.interceptors.request.use((c) => {
const token = localStorage.getItem('token');

if (token) {
// eslint-disable-next-line no-param-reassign
c.headers.Authorization = `Bearer ${token}`;
}

return c;
});

axios.interceptors.response.use(
(response) => response,
(error) => {
if (
error.response.status === 401 &&
useGlobalState.getState().currentPage?.id !== 'login'
) {
router.navigate('/login');
}

return Promise.reject(error);
}
);

SWR

Vivid brings the power of SWR to supercharge your data fetching experience. By default, Vivid sets default fetcher globally in src/pages/_app.tsx file.

src/pages/data/user.tsx
import useSWR from 'swr';

export default function User() {
const { data } = useSWR<User[]>('/user');

// ...
}