Getting Started

Automatic Setup

Run npx inatic init in your project root to automatically set up Inatic Mocks.

Manual Setup

  1. Install the inatic package as a dev dependency from npm using the package manager of your choice.
  2. Add the following script to your package.json:
{
  "scripts": {
    "inatic": "inatic"
  }
}

Obtaining an API Key

To use Inatic Mocks, you need an API key. You can obtain one by signing up at our self-service portal.

Once you have an API key, use it to authenticate your requests by directly injecting your token as an environment variable named INATIC_KEY. Alternatively, create a .env file in your project root and add the following line:

INATIC_KEY=your-api-key

Basic Usage

First, import mock from the inatic package:

import { mock } from 'inatic';

If you’re using a module bundler like Webpack or Rollup, you may need to import from inatic/bundlers instead:

import { mock } from 'inatic/bundlers';

Then, create a mock as follows:

const data = mock<MyType>('mock description');

Example:

type User = {
  id: number;
  name: string;
  job: string;
  age: number;
  email: string;
};

const user = mock<User>('a developer');

Next, run the inatic script from your package.json to generate the mock data:

npm run inatic

Congratulations! You can now integrate magic mock data into your application!

Advanced Usage

Mocking Arrays

Mocking arrays is also supported! Just pass an array type to the mock function:

type Car = {
  id: number;
  brand: string;
  model: string;
  year: number;
};

const cars = mock<Car[]>('fast electric cars');

By default, Inatic generates an array with 3 entries. Change this behavior by passing a config object:

const cars = mock<Car[]>('fast electric cars', { length: 10 });

Support for up to 10 entries is provided.

Using a Fallback Function

If desired, pass a fallback function to the mock call. This function is executed unless the INATIC=true environment variable is set. This feature is useful for using real data in production, but mock data in development.

const cars = await mock<Car[]>('fast electric cars', () => fetch('/api/cars'));

Combining Config and Fallback

Combine the config and fallback function as follows:

const cars = await mock<Car[]>('fast electric cars', { length: 10 }, () =>
  fetch('/api/cars'),
);