# Axios API Calls

### Axios API call using SWR

Products values has been initialized using useSWR with Axios fetcher like below:

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

```typescript
export function useGetProducts() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.list, fetcher, {
    revalidateIfStale: true,
    revalidateOnFocus: true,
    revalidateOnReconnect: true
  });

  const memoizedValue = useMemo(
    () => ({
      products: data?.products,
      productsLoading: isLoading,
      productsError: error,
      productsValidating: isValidating,
      productsEmpty: !isLoading && !data?.products?.length
    }),
    [data, error, isLoading, isValidating]
  );

  return memoizedValue;
}
```

{% endcode %}

You can mutate products list with Axios call, like below,

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

```javascript
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
  );
}
```

{% endcode %}

### Set default axios baseURL for call API

Open .env file and edit REACT\_APP\_API\_URL.

{% code title=".env" %}

```javascript

## Backend API URL
VITE_APP_API_URL=

```

{% endcode %}

You can configure the same for **next.js** as well.

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

### Example 1: With baseUrl

```javascript
import { useCallback, useState } from 'react';

// project-imports
import axios from 'utils/axios'; 
import { UserProfile } from 'types/users';

// ==============================|| AXIOS - USER ||============================== //

function UserList() {
  const [users, setUsers] = useState([]);

  const getUsers = useCallback(async () => {
    try {
      const response = await axios.get('/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>
  );
}
```

### Example 2: Without baseUrl

You can set the entire URL in Axios request. Do not use common Axios instances  **`src\utils\axios.js`**&#x69;nstead use directly Axios library.

```javascript
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>
  );
}
```