Is it possible to use API routers in main.wasp?

Example of a router:

import { Router } from "express";
import { UserController } from "../controllers/user.controller";
import { UserService } from "../services/user.service";
import {
  registerValidator,
  loginValidator,
} from "../validators/user.validator";
// import { validateRequest } from '../middleware/auth.middleware';
import { PrismaClient } from "@prisma/client";

export function createUserRouter(prisma: PrismaClient): Router {
  const router = Router();
  const userService = new UserService(prisma);
  const userController = new UserController(userService);

  router.post(
    "/register",
    // validateRequest,
    registerValidator,
    userController.register
  );

  router.post(
    "/login",
    // validateRequest,
    loginValidator,
    userController.login
  );

  return router;
}

import { Router } from "express";
import { UserController } from "../controllers/user.controller";
import { UserService } from "../services/user.service";
import {
  registerValidator,
  loginValidator,
} from "../validators/user.validator";
// import { validateRequest } from '../middleware/auth.middleware';
import { PrismaClient } from "@prisma/client";

export function createUserRouter(prisma: PrismaClient): Router {
  const router = Router();
  const userService = new UserService(prisma);
  const userController = new UserController(userService);

  router.post(
    "/register",
    // validateRequest,
    registerValidator,
    userController.register
  );

  router.post(
    "/login",
    // validateRequest,
    loginValidator,
    userController.login
  );

  return router;
}

Then is it possible to do this in main.wasp:

example 1:
api userRoutes {
  fn: import { createUserRouter } from "@src/server/features/user/routes/user.routes",
  entities: [],
  httpRoute: (ANY, "/api/v1")
}

example 2:
apiNamespace loginRoutes {
  fn: import { createUserRouter } from "@src/server/features/user/routes/user.routes",
  entities: [],
  path: "/api/v1"
}

example 1:
api userRoutes {
  fn: import { createUserRouter } from "@src/server/features/user/routes/user.routes",
  entities: [],
  httpRoute: (ANY, "/api/v1")
}

example 2:
apiNamespace loginRoutes {
  fn: import { createUserRouter } from "@src/server/features/user/routes/user.routes",
  entities: [],
  path: "/api/v1"
}

3 Replies

kapa.ai•4w ago

Hi @unagi7171. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, it's not directly possible to use API routers in main.wasp in the way you've described. Wasp has its own way of defining API routes and doesn't support using Express routers directly in the main.wasp file. However, there are alternative approaches you can use to achieve similar functionality within Wasp's framework. Let me explain: 1. Custom API Endpoints: Wasp allows you to define custom API endpoints using the api declaration in main.wasp. However, these are individual endpoints rather than full routers. Here's an example of how you can define a custom API endpoint Custom HTTP API Endpoints (https://wasp-lang.dev/docs/advanced/apis):

   api fooBar {
     fn: import { fooBar } from "@src/apis",
     httpRoute: (GET, "/foo/bar"),
     entities: [Task],
     auth: true
   }

   api fooBar {
     fn: import { fooBar } from "@src/apis",
     httpRoute: (GET, "/foo/bar"),
     entities: [Task],
     auth: true
   }

2. Server Setup Function: You can use the setupFn in the server configuration to add custom routes or middleware. This allows you to add Express routers to your Wasp app Server Config (https://wasp-lang.dev/docs/project/server-config). Here's an example:

   app MyApp {
     title: "My app",
     server: {
       setupFn: import { mySetupFunction } from "@src/myServerSetupCode.js"
     }
   }

   app MyApp {
     title: "My app",
     server: {
       setupFn: import { mySetupFunction } from "@src/myServerSetupCode.js"
     }
   }

In your myServerSetupCode.js, you could then use your router:

   import { createUserRouter } from "./features/user/routes/user.routes";

   export const mySetupFunction = async ({ app, prisma }) => {
     const userRouter = createUserRouter(prisma);
     app.use('/api/v1', userRouter);
   }

   import { createUserRouter } from "./features/user/routes/user.routes";

   export const mySetupFunction = async ({ app, prisma }) => {
     const userRouter = createUserRouter(prisma);
     app.use('/api/v1', userRouter);
   }

3. API Namespaces: Wasp supports apiNamespace for applying middleware to a group of API routes under a specific path Customize Per-Path Middleware (https://wasp-lang.dev/docs/advanced/middleware-config#3-customize-per-path-middleware). However, this is used for middleware configuration rather than defining routes:

   apiNamespace fooBar {
     middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",
     path: "/foo/bar"
   }

   apiNamespace fooBar {
     middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",
     path: "/foo/bar"
   }

In conclusion, while you can't directly use Express routers in main.wasp as shown in your examples, you can achieve similar functionality by using Wasp's api declarations for individual endpoints and the setupFn for more complex routing setups. The apiNamespace feature is primarily for middleware configuration rather than route definition. For the most flexible approach, I would recommend using the setupFn method, as it allows you to use your Express routers within the Wasp framework. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @unagi7171, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•4w ago

@unagi7171 not right now unfortunately, at least not via "custom api" functionality, although if you wanted, you coudl add it to the app via serverSetup functionality I believe: https://wasp-lang.dev/docs/project/server-config

Server Config | Wasp

You can configure the behavior of the server via the server field of app declaration:

martinsos•4w ago

Created an issue for it here, for us to track: https://github.com/wasp-lang/wasp/issues/2366

GitHub

Allow setting Express Router as the custom api endpoint? · Issue #2...

Right now, for custom api endpoint in Wasp, you need to provide a JS function that is Express middleware. If would be cool if you could also provide an Express Router, which is (in a way) a higher-...

Gaming

Programming

Is it possible to use API routers in main.wasp?