defineEventHandler not accepting multiple handlers

[notshekhar]

No description provided.

[notshekhar]

I have a naive approach to doing this, if we can somehow merge all functions in defineEventHandler's argument
defineEventHandler function takes handler and returns handlers
if we can do this defineEventHandler(one, two, three) and returns a handler like this we can do this

  function one(event){
     const a = 1
      console.log(a)
      return function b(){
          const a = 2
          return a
          return function c(){
              return 3
          }(event)
      }(event)
}

[notshekhar]

@pi0

[notshekhar]

@pi0 I have also written a small function to merge all the handlers

function mergeFunction() {
    let func = arguments[arguments.length - 1].toString()
    for (let i = arguments.length - 1; i > 0; i--) {
        const function2 = arguments[i - 1].toString()
        func = `${function2.substring(
            0,
            function2.length - 1
        )}\nreturn ${func}(event)}\n`
    }
    func = func.substring(func.indexOf("{") + 1, func.lastIndexOf("}"))
    console.log(func)
    return Function("event", func)
}

[wobsoriano]

Curious about what you are trying to do 🤔 Anyway, I just put handlers in an array

const handlers = [
  defineEventHandler((event) => {
    event.context.count = 1
  }),
  defineEventHandler((event) => {
    event.context.count++
  }),
  defineEventHandler((event) => {
    console.log(event.context.count)
  })
]

const app = createApp()

app.use(handlers)

You can also export an array of event handlers in Nuxt

// ~/server/middleware/something.ts
export default [
  defineEventHandler((event) => {
    event.context.count = 1
  }),
  defineEventHandler((event) => {
    event.context.count++
  }),
  defineEventHandler((event) => {
    console.log(event.context.count)
  })
]

[notshekhar]

No its not working in nuxt

[notshekhar]

[notshekhar]

[notshekhar]

@wobsoriano

[wobsoriano]

oh the array export works only on ~/server/middleware in nuxt

[notshekhar]

@wobsoriano No, I want middleware on a single endpoint, and /server/middleware automatically runs on every route change.

[wobsoriano]

@wobsoriano No, I want middleware on a single endpoint, and /server/middleware automatically runs on every route change.

That's why you have to conditionally check it 😉

Use server middleware > check url > continue to api url

[notshekhar]

yeah currently I am checking the URL but I might add more endpoints and every time I will add a new endpoint will have to add it in middleware condition, so I do want something to add middleware on individual endpoints like express.

[notshekhar]

@wobsoriano

[wobsoriano]

yeah currently I am checking the URL but I might add more endpoints and every time I will add a new endpoint will have to add it in middleware condition, so I do want something to add middleware on individual endpoints like express.

Yeah that's currently the only way, or, you can create an interceptor function and use that for every api route you need

[notshekhar]

@wobsoriano can we connect, what we can do is we can also implement this in nitro.

[notshekhar]

@wobsoriano ??

[pi0]

H3 event handlers, unlike express, are not middleware runners. You probably want to split your logic into reusable composable functions that accept event objects.

But if you really want to use this pattern, nesting apps is possible. as @wobsoriano suggested you can create a nested app:

import { eventHandler, createApp } from 'h3';

const app = createApp();

app.use([
  eventHandler((event) => {
    event.context.counter = 1;
  }),
  eventHandler((event) => {
    event.context.counter++;
  }),
  eventHandler((event) => 'Counter:' + event.context.counter),
]);

export default app;

Example sandbox: https://stackblitz.com/edit/github-rqbwda?file=routes%2Findex.ts

[notshekhar]

@pi0 now how do I do this it is not working anymore and I have used it in my project, please help