Frontend Integration

Integrating MockQL with your frontend application is as simple as changing a single environment variable. No code changes required.

One-Line Integration

Simply update your API base URL in your environment file to point to MockQL. Everything else stays the same.

.env (Production)

Original

BACKEND_ENDPOINT=https://api.production.com

.env.local (Development)

MockQL

BACKEND_ENDPOINT=https://mockql.com/api/v1/endpoint/simulate/rest/project-id

How It Works

Your Frontend

process.env.BACKEND_ENDPOINT + '/users'

MockQL Proxy

Original API or Mock

Example Usage

No changes needed to your API calling code. Use the environment variable as normal in your application.

api.js

// Same code works with both real and mocked APIs
const API_BASE_URL = process.env.BACKEND_ENDPOINT;

// Example API client
export const fetchUsers = async () => {
  try {
    const response = await fetch(`${API_BASE_URL}/users`);
    if (!response.ok) throw new Error('API request failed');
    return await response.json();
  } catch (error) {
    console.error('Error fetching users:', error);
    throw error;
  }
};

That's it! Your application now uses MockQL for development and real APIs for production, with no code changes required.

Quick Tips

.env.local

Create a local environment file for development that won't be committed to your repository.

Easy Switching

Toggle between mock and real APIs by simply changing your .env.local file - no code edits required.

Deployment Ready

When you deploy to production, your app automatically uses the real API endpoint from the production environment.

Framework Examples

React + Fetch

// React component using environment variable
import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    // Uses environment variable for API URL
    fetch(`${process.env.REACT_APP_BACKEND_ENDPOINT}/users`)
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Next.js API Route

// pages/api/users.js
export default async function handler(req, res) {
  try {
    // Uses environment variable from .env.local
    const apiUrl = `${process.env.BACKEND_ENDPOINT}/users`;
    
    const response = await fetch(apiUrl);
    const data = await response.json();
    
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch users' });
  }
}

That's All You Need!

MockQL is designed to be as unobtrusive as possible. Just change one environment variable and you're ready to test with mocked or extended APIs.