Is there any way to modularize routes?

Hello!! I am using mirageJs into my react native app to mock some externals apis calls in development. In this moment i have one big index.ts file, handling a lot of request from multiple apis, but that is not ideal. There is any way to build the routes with many files, like routes/external_api1.ts, and after import then in my server routes? Or there is any another way to do anything like that?

My index.ts that i want to split in api_auth and api_cep files, for example:

import { Server, Response } from 'miragejs';

export default function ({ environment = 'development' } = {}) {
  return new Server({
    environment,

    routes() {
      this.post('api_auth/signup', () => {
        return new Response(201, {}, userAuthResponse);
      });

      this.post('api_auth/login', () => {
        return new Response(201, {}, userAuthResponse);
      });

      this.post('api_cep/login', () => {
        return new Response(201, {}, cepResponse);
      });
    }

[samselikoff]

There’s a few ways you could do this – maybe after you find something you like we can add it to the docs!

First you could import functions and call them in your routes() hook:

import { createServer } from 'miragejs';
import apiAuthHandlers from './handlers/api-auth';
import apiCepHandlers from './handlers/api-cep';

export default function ({ environment = 'development' } = {}) {
  return createServer({
    environment,

    routes() {
      apiAuthHandlers(this)
      apiCepHandlers(this)
    }
  }
})

These could just be functions that take in the server instance (which is this within routes()) and define the handlers there:

// /mirage/handlers/api-auth.js
export default function(server) {
  server.post('api_auth/signup', () => {
    return new Response(201, {}, userAuthResponse);
  });

  server.post('api_auth/login', () => {
    return new Response(201, {}, userAuthResponse);
  }); 
}

I’ve done this before and it works great.

Alternatively you might be able to use the config() method on a server instance, which lets you augment an existing server with additional config. That could look something like this:

import { createServer } from 'miragejs';
import addApiAuthHandlers from './handlers/api-auth';
import addApiCepHandlers from './handlers/api-cep';

export default function ({ environment = 'development' } = {}) {
  let server = createServer({ environment });

  addApiAuthHandlers(server)
  addApiCepHandlers(server)

  return server;
})

Then those functions would look something like this:

// mirage/handlers/api-auth

export default function(server) {
  server.config({
    routes() {
      this.post('api_auth/signup', () => {
        return new Response(201, {}, userAuthResponse);
      });

      this.post('api_auth/login', () => {
        return new Response(201, {}, userAuthResponse);
      });
    }
  })
}

The nice thing about this approach is that because the other hooks are also available in the config() method, you could co-locate some related logic in these files, like adding more models or seeds to your server.

Let me know if one of those approaches works out!

[TimRChen]

It’s great. But why not put this practice in the official document ?