# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codedthemes.gitbook.io/datta/axios-api-calls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.