context.locals or locals?

[jamesli2021]

📚 Subject area/topic

To context.locals or locals?

📋 Page(s) affected (or suggested, for new content)

Understanding the context is like trying to find your way around a new city without a map; it's a whole lot easier when you know where you're standing!

https://docs.astro.build/en/guides/middleware/

It's interesting to see how others have approached in their writing:
https://github.com/gustavocadev/lucia/blob/cf41b481e184dd5ebfa03ec1d04e4f3e858487cd/docs/pages/getting-started/astro.md?plain=1#L2

But which is correct?

📋 Description of content that is out-of-date or incorrect

Storing data in context.locals
Section titled Storing data in context.locals

context.locals is an object that can be manipulated inside the middleware.

This locals object is forwarded across the request handling process and is available as a property to APIContext and AstroGlobal. This allows data to be shared between middlewares, API routes, and .astro pages. This is useful for storing request-specific data, such as user data, across the rendering step.

Integration properties

Integrations may set properties and provide functionality through the locals object. If you are using an integration, check its documentation to ensure you are not overriding any of its properties or doing unnecessary work.

...

src/middleware.js

export function onRequest ({ locals, request }, next) {

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

NA

[Fryuni]

I don't get your point, the two pages perfectly agree with each other. Which part is confusing you?

Is it because in the Astro example context is being destructured?

[jamesli2021]

I don't get your point too.

Could you please explain the meaning of 'context' within the term 'context.locals'?

What is the difference between context.locals and just write locals?

[Fryuni]

There is no difference.

context is how the first argument of the middleware is called (the type is called APIContext). Same for API Endpoints.

// This
export const onRequest = (context, next) => {
  const locals = context.locals;
  locals.foo = 'bar';
};

// Is the same as this
export const onRequest = ({ locals }, next) => {
  locals.foo = 'bar';
};

It is just a more compact JS syntax called destructuring which can be used in many places including function parameters

[sasoria]

Thank you for the issue, maybe we could try to keep the code examples as simple as possible and avoid destructuring?

At least in the first code example, the text above it becomes easier to understand:

Inside this file, export an onRequest() function that can be passed a context object and next() function. This must not be a default export.

export function onRequest (context, next) {
  ...
}