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');

  // ...
}