Berry React
v3.6.0
v3.6.0
  • Documentation
  • 🎺About - Berry Remix
  • Pre-requisites
  • Quick Start
  • Folder Structure
  • State Management
  • Internationalization
  • Authentication
  • Axios API Calls
  • Routing
  • Project Configuration
  • Color Presets
  • Theme/Style Configuration
  • How to
    • Login as First Page
    • Add a menu from the backend
    • Remove eslint
    • Remove prettier
  • Integration
  • Resources
  • Roadmap
  • Support
  • Changelog
  • FAQ
  • Berry Eco System
Powered by GitBook
On this page
  • Set default axios baseURL for call API
  • Example 1: With baseUrl
  • Example 2: Without baseUrl

Was this helpful?

Axios API Calls

API calls

Set default axios baseURL for call API

Open .env file and edit REACT_APP_API_URL.

.env

## Backend API URL
REACT_APP_API_URL=

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

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.jsinstead use directly Axios library.

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

Last updated 2 years ago

Was this helpful?