Mock API Setup - Bimble Chat Vue Documentation

Overview

Bimble Chat Vue includes a comprehensive Mock API system built with axios-mock-adapter that simulates a real backend API for development and demonstration purposes. This allows you to:

Rapid Development

Start developing immediately without waiting for backend APIs

Testing & Demos

Perfect for creating demos and testing UI components

Rich Sample Data

Includes realistic chat, contact, and call data

Response Delays

Simulates real network conditions with configurable delays

Mock API Structure

The Mock API system is organized in the src/mockApis/ directory:

src/mockApis/ Mock API root directory

index.ts Main entry point, imports all mock modules

mockAdapter.ts Axios mock adapter configuration

chat/ Chat-related API endpoints

calls/ Call history and management endpoints

contacts/ Contact management endpoints

Installation & Setup

The Mock API system comes pre-configured in Bimble Chat Vue. Here's how it's set up:

1

Dependencies Included

The required packages are already installed in package.json:

{
  "dependencies": {
    "axios": "^1.11.0",
    "axios-mock-adapter": "^2.1.0",
    "date-fns": "^4.1.0"
  }
}

2

Mock Adapter Configuration

The mock adapter is configured in src/mockApis/mockAdapter.ts:

import AxiosMockAdapter from 'axios-mock-adapter';
import axios from '@/utils/axios';

// Create mock adapter with 500ms delay to simulate network
const mock = new AxiosMockAdapter(axios, { delayResponse: 500 });
export default mock;

3

Import & Initialization

All mock modules are imported in src/mockApis/index.ts:

import mock from './mockAdapter';
import './chat';
import './calls';
import './contacts';

export default mock;

Available API Endpoints

The Mock API provides endpoints for all major application features:

Chat Endpoints

GET /api/chats Get all chat conversations

POST /api/chats Create new chat conversation

GET /api/chats/:id Get specific chat by ID

POST /api/messages Send new message

DELETE /api/messages/:id Delete message

Contact Endpoints

GET /api/contacts Get all contacts

POST /api/contacts Add new contact

PUT /api/contacts/:id Update contact

DELETE /api/contacts/:id Remove contact

Call Endpoints

GET /api/calls Get call history

POST /api/calls Start new call

PUT /api/calls/:id Update call status

Configuration Options

You can customize the Mock API behavior through various configuration options:

Response Delays

Modify the response delay to simulate different network conditions:

// In mockAdapter.ts
const mock = new AxiosMockAdapter(axios, { 
  delayResponse: 500  // 500ms delay (default)
});

// For faster responses during development
const mock = new AxiosMockAdapter(axios, { 
  delayResponse: 100  // 100ms delay
});

// For testing slow networks
const mock = new AxiosMockAdapter(axios, { 
  delayResponse: 2000  // 2 second delay
});

Error Simulation

You can configure endpoints to return errors for testing error handling:

// Simulate 500 server error
mock.onGet('/api/chats').reply(500, {
  message: 'Internal Server Error'
});

// Simulate 404 not found
mock.onGet('/api/chats/999').reply(404, {
  message: 'Chat not found'
});

// Simulate network timeout
mock.onPost('/api/messages').timeout();

Usage Examples

Here are common examples of how to use the Mock API in your components:

Fetching Chat Data

import axios from '@/utils/axios';

// Get all chats
const fetchChats = async () => {
  try {
    const response = await axios.get('/api/chats');
    return response.data;
  } catch (error) {
    console.error('Failed to fetch chats:', error);
  }
};

// Get specific chat
const fetchChatById = async (chatId: number) => {
  try {
    const response = await axios.get(`/api/chats/${chatId}`);
    return response.data;
  } catch (error) {
    console.error('Failed to fetch chat:', error);
  }
};

Sending Messages

const sendMessage = async (messageData: any) => {
  try {
    const response = await axios.post('/api/messages', {
      chatId: messageData.chatId,
      msg: messageData.message,
      type: 'text',
      senderId: 999 // Current user ID
    });
    return response.data;
  } catch (error) {
    console.error('Failed to send message:', error);
  }
};

Managing Contacts

// Add new contact
const addContact = async (contactData: any) => {
  try {
    const response = await axios.post('/api/contacts', contactData);
    return response.data;
  } catch (error) {
    console.error('Failed to add contact:', error);
  }
};

// Delete contact
const deleteContact = async (contactId: number) => {
  try {
    await axios.delete(`/api/contacts/${contactId}`);
  } catch (error) {
    console.error('Failed to delete contact:', error);
  }
};

Disabling Mock API

When you're ready to connect to a real backend API, you can disable the Mock API:

1

Remove Mock Import

Comment out or remove the mock import in your main.js:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// Comment out this line to disable mock API
// import '@/mockApis';

const app = createApp(App);

2

Update Base URL

Update your axios configuration to point to your real API:

// utils/axios.ts
const axiosServices = axios.create({
  baseURL: 'https://your-api-domain.com', // Your real API
  timeout: 10000,
});

Troubleshooting

Mock API Not Working

Issue: API calls are not being intercepted by the mock adapter.

Solution:

Ensure @/mockApis is imported in your main.js
Check that axios instance is imported from @/utils/axios
Verify endpoint URLs match exactly (case-sensitive)

Slow Response Times

Issue: Mock API responses are too slow during development.

Solution: Reduce the delayResponse value in mockAdapter.ts

Console Warnings

Issue: Console shows warnings about unmatched requests.

Solution: Add onNoMatch: 'passthrough' to mock adapter options

What's Next?

Now that you understand the Mock API setup, explore these related topics:

Sample Data

Explore the rich sample data included with the Mock API

Pinia Stores

Learn how stores consume the Mock API data

Development Setup

Complete development environment configuration