Integration Overview

Mock API Builder provides standard HTTP APIs that work with any HTTP client. This guide focuses on REST. GraphQL clients should post to /api/graphql/{slug} — see the GraphQL guide and Choosing a Protocol for gRPC and SOAP URLs.

Web Frameworks

React, Vue, Angular, Svelte—works with all modern web frameworks

Mobile Apps

React Native, Flutter, Swift, Kotlin—native mobile integration

HTTP Clients

fetch, Axios, TanStack Query, SWR—use your preferred client

State Management

Redux, Zustand, Context API—integrate with any state solution

React / Next.js

Using fetch() with useState

javascript

Using TanStack Query (React Query)

Recommended

javascript

Using Axios with Custom Hook

javascript

Vue.js

Using Composition API with fetch

javascript

Using Axios with Composable

javascript

Angular

Using HttpClient Service

javascript

React Native

Mobile App Integration

javascript

Environment Configuration

Use environment variables to easily switch between mock and production APIs:

React / Next.js (.env.local)

bash

Usage: process.env.NEXT_PUBLIC_API_URL

Vue.js (.env)

bash

Usage: import.meta.env.VITE_API_URL

Angular (environment.ts)

javascript

Usage: environment.apiUrl

CORS Configuration

CORS is Automatically Handled

Mock API Builder automatically includes the necessary CORS headers for all responses:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE
• Access-Control-Allow-Headers: Content-Type, Authorization

No additional configuration needed—calls from any domain will work.

Best Practices

✓Use environment variables to switch between mock and production APIs
✓Create an API service/module to centralize all API calls
✓Handle loading and error states for better user experience
✓Use data fetching libraries like TanStack Query or SWR for caching and synchronization
✓Add request/response interceptors for authentication, logging, and error handling
✓Test with mock data first before connecting to production APIs
✓Use TypeScript interfaces to type your API responses for better developer experience

Integration Overview

Web Frameworks

React, Vue, Angular, Svelte—works with all modern web frameworks

Mobile Apps

React Native, Flutter, Swift, Kotlin—native mobile integration

HTTP Clients

fetch, Axios, TanStack Query, SWR—use your preferred client

State Management

Redux, Zustand, Context API—integrate with any state solution

CORS Configuration

CORS is Automatically Handled

Mock API Builder automatically includes the necessary CORS headers for all responses:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE
• Access-Control-Allow-Headers: Content-Type, Authorization

No additional configuration needed—calls from any domain will work.

Best Practices

✓Use environment variables to switch between mock and production APIs
✓Create an API service/module to centralize all API calls
✓Handle loading and error states for better user experience
✓Use data fetching libraries like TanStack Query or SWR for caching and synchronization
✓Add request/response interceptors for authentication, logging, and error handling
✓Test with mock data first before connecting to production APIs
✓Use TypeScript interfaces to type your API responses for better developer experience

Frontend Integration

Integration Overview

React / Next.js

Vue.js

Angular

React Native

Environment Configuration

CORS Configuration

CORS is Automatically Handled

Best Practices

Frontend Integration

Integration Overview

React / Next.js

Vue.js

Angular

React Native

Environment Configuration

CORS Configuration

CORS is Automatically Handled

Best Practices