> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/axios-api-calls.md).

# Axios API Calls

{% tabs %}
{% tab title="VITE ( TS )" %}

## Axios API call using SWR

1. Address values have been initialised using useSWR with Axios fetcher like below:

{% code title="src/api/calendar.ts" %}

```typescript
import { useMemo } from 'react';

// third-party
import useSWR, { mutate } from 'swr';
import { v4 as UIDV4 } from 'uuid';

// project-imports
import { fetcher } from 'utils/axios';

// types
import { EventInput } from '@fullcalendar/common';

export const endpoints = {
  key: 'api/calendar/events',
  add: '/add', // server URL
  update: '/update', // server URL
  delete: '/delete' // server URL
};

export function useGetEvents() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
    () => ({
      events: data?.events as EventInput[],
      eventsLoading: isLoading,
      eventsError: error,
      eventsValidating: isValidating,
      eventsEmpty: !isLoading && !data?.length
    }),
    [data, error, isLoading, isValidating]
  );

  return memoizedValue;
}

...
...
...

}
```

{% endcode %}

{% code title="src/sections/application/calendar/AddEventForm.tsx" %}

```typescript
if (selectedEvent && selectedEvent.id) {
          await updateEvent(selectedEvent.id, transformedValues);
        } else {
          await createEvent(transformedValues);
}
```

{% endcode %}

## Set the default axios baseURL to call the API

Open the **`src\utils\axios.ts`** file and edit VITE\_APP\_API\_URL.

{% code title="src/utils/axios.ts" %}

```typescript
const VITE_APP_API_URL = 'https://mock-data-api-nextjs.vercel.app/';
```

{% endcode %}

Axios has been configured in the folder **`src\utils\axios.ts`**

{% code title="src\utils\axios.ts
" %}

```typescript
import axios, { AxiosRequestConfig } from 'axios';

const VITE_APP_API_URL = 'https://mock-data-api-nextjs.vercel.app/';
const axiosServices = axios.create({ baseURL: VITE_APP_API_URL || 'http://localhost:3010/' });

// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //

axiosServices.interceptors.request.use(
  async (config) => {
    config.headers['Authorization'] =
      'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1ZTg2ODA5MjgzZTI4Yjk2ZDJkMzg1MzciLCJpYXQiOjE3NDM0MDMxMjEsImV4cCI6MTc0MzQ4OTUyMX0.hvqWYTc1NOylXAp0fA0LmRF6xlfeiCniIV5vjfGteg0';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosServices;

export const fetcher = async (args: string | [string, AxiosRequestConfig]) => {
  const [url, config] = Array.isArray(args) ? args : [args];

  const res = await axiosServices.get(url, { ...config });

  return res.data;
};

export const fetcherPost = async (args: string | [string, AxiosRequestConfig]) => {
  const [url, config] = Array.isArray(args) ? args : [args];

  const res = await axiosServices.post(url, { ...config });

  return res.data;
};

```

{% endcode %}
{% endtab %}

{% tab title="VITE ( JS )" %}

## Axios API call using SWR

1. Address values have been initialised using useSWR with Axios fetcher, like below:

<pre class="language-javascript" data-title="calender.js
"><code class="lang-javascript">import { useMemo } from 'react';

// third-party
import useSWR, { mutate } from 'swr';
import { v4 as UIDV4 } from 'uuid';

// project-imports
import { fetcher } from 'utils/axios';

export const endpoints = {
  key: 'api/calendar/events',
  add: '/add', // server URL
  update: '/update', // server URL
  delete: '/delete' // server URL
};

export function useGetEvents() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
    () => ({
      events: data?.events,
      eventsLoading: isLoading,
      eventsError: error,
      eventsValidating: isValidating,
      eventsEmpty: !isLoading &#x26;&#x26; !data?.length
    }),
    [data, error, isLoading, isValidating]
  );

  return memoizedValue;
}

<strong>....
</strong>....
....


}
</code></pre>

2. You can mutate the event create and update  with an Axios call, like below,

{% code title="src/sections/application/calendar/AddEventForm.jsx
" %}

```javascript
if (selectedEvent && selectedEvent.id) {
    await updateEvent(selectedEvent.id, transformedValues);
 } else {
    await createEvent(transformedValues);
}
```

{% endcode %}

## Set the default axios baseURL to call the API

Open the **`src\utils\axios.js`** file and edit VITE\_APP\_API\_URL.

{% code title="src\utils\axios.js" %}

```javascript
const VITE_APP_API_URL = 'https://mock-data-api-nextjs.vercel.app/';
```

{% endcode %}

Axios has been configured in the folder **`src\utils\axios.js`**

{% code title="src\utils\axios.js" %}

```javascript
import axios from 'axios';

const VITE_APP_API_URL = 'https://mock-data-api-nextjs.vercel.app/';
const axiosServices = axios.create({ baseURL: VITE_APP_API_URL || 'http://localhost:3010/' });

// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //

axiosServices.interceptors.request.use(
  async (config) => {
    config.headers['Authorization'] =
      'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1ZTg2ODA5MjgzZTI4Yjk2ZDJkMzg1MzciLCJpYXQiOjE3NDM0MDMxMjEsImV4cCI6MTc0MzQ4OTUyMX0.hvqWYTc1NOylXAp0fA0LmRF6xlfeiCniIV5vjfGteg0';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosServices;

export const fetcher = async (args) => {
  const [url, config] = Array.isArray(args) ? args : [args];

  const res = await axiosServices.get(url, { ...config });

  return res.data;
};

export const fetcherPost = async (args) => {
  const [url, config] = Array.isArray(args) ? args : [args];

  const res = await axiosServices.post(url, { ...config });

  return res.data;
};

```

{% endcode %}

{% endtab %}
{% endtabs %}