As of Wasp 0.12.0-ish, we can mix client and server code in the same file.

For example, the main.wasp can have this:

route SomeRoute { path: "/something", to: SomePage }
page SomePage {
  component: import { SomeComponent } from "@src/api"
}

// ...

api fooBar {
  fn: import { fooBar } from "@src/api",
  httpRoute: (GET, "/foo/bar")
} 

The src/api.tsx file can contain this:

import type { FooBar } from 'wasp/server/api'

export const fooBar: FooBar = (req, res, context) => {
  res.json({ msg: 'Hello friend' })
}

export const SomeComponent = () => {
  return <div>Some gmali</div>
}

And everything works (even when built and deployed).

Gotchas:

• Hot reloading on the server doesn't work for the tsx file (i.e,. the server ignores changes).
  This probably happens because we're not watching .tsx files.
  • Related issue: Investigate how our file watching works #1844)
• It's even possible to use React on the server:

  import type { FooBar } from 'wasp/server/api'
  import React from 'react' // necessary
  
  export const fooBar: FooBar = (req, res, context) => {
    console.log(SomeComponent())
    res.json({ msg: 'Hello friend' })
  }
  
  export const SomeComponent = () => {
   return <div>Some gmali</div>
  }

  If you forget to import react, you get a runtime error (neither the IDE or Wasp complain in compile time). We should investigate this as well.