Getting Started
Automatic Setup
Run npx inatic init
in your project root to automatically set up Inatic Mocks.
Manual Setup
- Install the
inatic
package as a dev dependency from npm using the package manager of your choice. - 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'),
);