Middleware as central point for API calls (GET)

[karmic pumice]

Hello dear Astro Community,
I just try to figure out the middleware of astro and unfortunately, I run into a problem.
I fetch some data from two api's (currently, more planned) with fetch() which works great if I store it into the component script of my components/Test.astro. However, if I put it into the middleware, it doesn't work. I already tried different ways and changed some of my code, but couldn't solve this issue, so I am asking you for help.

I have attached a .txt showing what has worked for me and what I have tried that unfortunately does not work. Please note that I am aware of some redundancy in my JS code 🙂 As long as it worked, I wanted to keep it that way and clean it up later ^^

I'm sure I've overlooked some important detail and/or made a silly mistake, so I'd be very grateful if someone could enlighten me!

[fierce wigeon]

Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[distant minnow]

Are you getting any errors? I think the function passed to defineMiddleware needs to be async since your using await inside of it

[karmic pumice]

@distant minnow thank you for your response! This is a good point, I added it. Unfortunately, there is still an error.
The error is „Cannot read properties of undefined (reading ‘firstName‘)
File: (…)\app\eval at instantModule (file:(…)\app\node_modules\vite\dist\node\chunks\dep-e8f070e8.js:54402.28

I guess there is still a problem with my whole function. If I try to log e.g. „hello middleware“ right after the function opens, not even this get logged..
Apart from that the index.js does not throws an error if I update middleware/index.js.
Only if I try to get the const e.g from test.astro, the error occurs.

So I interpret it that way that everything in the function is syntactically ok but I missed smth as the fetch doesn’t work…

[distant minnow]

Is middleware/index.js inside /src like /src/middleware/index.js?

Two things I noticed after taking another quick glance:

• You have to set context.locals instead of just locals
• Since your using defineMiddleware you should be using a .ts file

[karmic pumice]

Hello @distant minnow ,
many thanks for your further investigations! 🙂
The typo with context.locals I already figured out and changed it.

Changing the index.js to index.ts is a good idea, unfortunately, I still run into an error.

Attached you find the current code of index.ts and the required file structure. As you can see the path is app/src/middleware/index.ts.

The error message I get is:

(...)\app>npm run astro dev
Debugger attached.

extinct-event@0.0.1 astro
astro dev

Debugger attached.
astro v2.7.1 started in 360ms

┃ Local http://localhost:3000/
┃ Network use --host to expose

error Cannot read properties of undefined (reading 'firstName')
File:
(...)\app\eval at instantiateModule ((...)\app\node_modules\vite\dist\node\chunks\dep-e8f070e8.js:54402:28
Stacktrace:
TypeError: Cannot read properties of undefined (reading 'firstName')
at eval (eval at instantiateModule (file:///(...)/app/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54402:28), <anonymous>:12:104)
at AstroComponentInstance.test [as factory] (eval at instantiateModule (file:///(...)/app/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54402:28), <anonymous>:22:12)
at AstroComponentInstance.init (eval at instantiateModule (file:///(...)/app/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54402:28), <anonymous>:26:29)
(...)
(full Stacktrace in astro-discord.txt)

[distant minnow]

What version of Astro are you using?

[karmic pumice]

I use v2.7.1

[manic python]

So you get no middleware logs at all? Like "Middleware reached" never gets printed?

@karmic pumice

[karmic pumice]

Exactly!!

[manic python]

Can you get rid of the middleware folder, move the index.ts to the same level as the env.d.ts and rename it to middleware.ts ?

[karmic pumice]

Hey @manic python, I just did it - unfortunately still the same error as attached:/

[manic python]

So in the root of the “src” folder you got a middleware.ts, and it does not log anything? @karmic pumice

[karmic pumice]

Yes, exactly.

[manic python]

What SSR adapter do you use?