Add route middleware functionality #9975

brophdawg11 · 2023-01-24T21:55:11Z

Middleware implementation to run before/after loaders/actions. API is inspired by the Fresh middleware with the .next() call in the middle thus allowing us to alter responses on the way back up the chain.

Data is passed down through strongly typed get/set methods that operate in a React Context-like manner where you define the typed "context" up front with an optional default value and use that as the key.

Proposal: #9564

Middleware pre execution
Middleware post execution
Strongly typed context
future.unstable_middleware flag
Rename middleware param to context behind the flag

changeset-bot · 2023-01-24T21:55:15Z

🦋 Changeset detected

Latest commit: 1e8a428

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@remix-run/router	Minor
react-router	Patch
react-router-dom	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brophdawg11 · 2023-01-26T23:21:09Z

packages/router/utils.ts

+  defaultValue: T
+): MiddlewareContextInstance<T> {
+  return new MiddlewareContextInstance<T>(defaultValue);
+}


@pcattori Definitely want to get your eyes on this before merging - this all "works" but no clue if it's "right" ;)

brophdawg11 · 2023-01-27T21:43:31Z

packages/router/router.ts

+ */
+export interface FutureConfig {
+  unstable_middleware: boolean;
+}


New future config accepted in createRouter

brophdawg11 · 2023-01-27T21:44:00Z

packages/router/router.ts

+export interface StaticHandlerInit {
+  basename?: string;
+  future?: FutureConfig;
+}


future also accepted in createStaticHandler

brophdawg11 · 2023-01-27T21:44:32Z

packages/router/router.ts

+          context: requestContext || disabledMiddlewareContext,
+        });
+
+    result = await Promise.race([dataPromise, abortPromise]);


If enabled, call the middleware pipeline, otherwise just call the handler

brophdawg11 · 2023-01-27T21:45:08Z

packages/router/router.ts

+  // Avoid memory leaks since we don't control the key
+  let store = new WeakMap();
+  let middlewareContext: MiddlewareContext = {
+    get<T>(k: MiddlewareContextInstance<T>) {
+      if (store.has(k)) {
+        return store.get(k) as T;
+      }
+      return k.getDefaultValue();
+    },
+    set<T>(k: MiddlewareContextInstance<T>, v: T) {
+      if (typeof v === "undefined") {
+        throw new Error(
+          "You cannot set an undefined value in the middleware context"
+        );
+      }
+      store.set(k, v);
+    },
+    next: () => {},
+  };


Create the context for this pipeline (scoped to a given loader/action execution)

brophdawg11 · 2023-01-27T21:45:44Z

packages/router/router.ts

+  let next: MiddlewareContext["next"] = () => {
+    nextCalled = true;
+    return callRouteSubPipeline(
+      request,
+      matches.slice(1),
+      params,
+      requestContext,
+      middlewareContext,
+      handler
+    );
+  };


Provide a next() function to this middleware which will launch all child middlewares and the eventual handler

brophdawg11 · 2023-01-27T21:46:27Z

packages/router/router.ts

+  if (nextCalled) {
+    return res;
+  } else {
+    return next();
+  }


If the middleware resolves without calling next() - just keep going down the chain

.changeset/hip-geckos-fold.md

appden · 2023-02-28T00:15:42Z

It looks like middleware will get run for document requests, so I think it would be nice to include middlewareContext in StaticHandlerContext for the benefit of accessing it from document handlers if needed.

cliffordfajardo · 2023-02-28T12:02:30Z

docs/route/middleware.md

+
+[pickingarouter]: ../routers/picking-a-router
+[react-context]: https://reactjs.org/docs/context.html
+[fresh-middleware]: https://fresh.deno.dev/docs/concepts/middleware


What you would middleware composition look like with this new API?
For example, what If I needed to apply 3-4 middleware to my request, which is not an uncommon thing if you're coming from Express or Fastify or in general a production nodejs server 😄

Recently stumbled upon this lib which takes a fetch API first approach & feels very vanilla, thought i'd share 👀
https://github.com/data-eden/data-eden/tree/main/packages/network

brophdawg11 · 2023-04-25T18:38:28Z

Closing temporarily - we'll be revisiting shortly after v2 releases

kstratis · 2023-10-12T06:59:02Z

Now that v2 has been released, perhaps this should be taken out of the fridge..?

brophdawg11 · 2023-10-12T15:14:29Z

It has - see the roadmap

kstratis · 2023-10-12T16:34:04Z

Wasn't aware! Thank u!

remix-cla-bot bot added the CLA Signed label Jan 24, 2023

mcansh mentioned this pull request Jan 26, 2023

chore: Update version for release #9988

Merged

brophdawg11 force-pushed the brophdawg11/middleware branch from 96fe57e to a13ebb2 Compare January 26, 2023 21:01

brophdawg11 commented Jan 26, 2023

View reviewed changes

MichaelDeBoey added the router label Jan 27, 2023

brophdawg11 changed the title ~~WIP: Middleware~~ Middleware Jan 27, 2023

brophdawg11 changed the title ~~Middleware~~ Add route middleware functionality Jan 27, 2023

brophdawg11 force-pushed the brophdawg11/middleware branch from b8c0eeb to d84bd08 Compare January 27, 2023 16:39

brophdawg11 marked this pull request as ready for review January 27, 2023 16:39

brophdawg11 commented Jan 27, 2023

View reviewed changes

machour reviewed Jan 27, 2023

View reviewed changes

.changeset/hip-geckos-fold.md Outdated Show resolved Hide resolved

brophdawg11 mentioned this pull request Feb 1, 2023

Add server + route middleware functionality remix-run/remix#5343

Closed

brophdawg11 force-pushed the brophdawg11/middleware branch from ebf9f48 to 19d7488 Compare February 2, 2023 20:39

brophdawg11 added 11 commits February 8, 2023 16:33

Test harness updates

3e947b0

Initial WIP implementation of beforeRequest

f184d48

Switch to middleware/next API

f4ee6b7

Middleware enhancements and tests

fad256d

middleware done, context typess needed

ae498d8

fix depth and add context typings

890066f

Add future flag

0a56a10

Bump bundle

545a8b7

Add changeset and re-exports

9c41325

bump

5e83ef5

Update typings

414c4fb

brophdawg11 added 10 commits February 8, 2023 16:33

Make requestContext optional and fix get/set generics

4d22813

Fix (aka ignore) TS error

e52c7e0

allow pre-populated context for static handler

1e51ffb

bundle bump

efd2e54

Add future config to react-router create*Router methods

0a853c5

Lift queryImpl 👋

d4ecfaf

Split submit/loadRouteData by query/queryRoute

7ab2f19

Dedup query middlewares with render function

0b0efe5

Switch to queryAndRender API

14c7d4e

Update createRoutesFromChildren snapshots to reflect middleware

3f9c740

brophdawg11 force-pushed the brophdawg11/middleware branch from 658580a to 3f9c740 Compare February 8, 2023 21:33

brophdawg11 added 6 commits February 9, 2023 16:14

Export UNSAFE_ stuff for use by remix server adaptors

ff38e9e

Bump bundle

44b8496

Update chnageset

4fe7b21

First stab at middleware docs

1cbab31

Remove section from changeset on deduping since it's in docs now

0b233aa

Add short circuiting tests

1e8a428

cliffordfajardo reviewed Feb 28, 2023

View reviewed changes

MichaelDeBoey added docs react-router-dom react-router-native react-router labels Mar 5, 2023

brophdawg11 closed this Apr 25, 2023

MichaelDeBoey deleted the brophdawg11/middleware branch August 15, 2023 23:07

GiveMe-A-Name mentioned this pull request Aug 21, 2023

[Feature]: Inject context to dataLoader Context web-infra-dev/modern.js#4473

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add route middleware functionality #9975

Add route middleware functionality #9975

brophdawg11 commented Jan 24, 2023 •

edited

changeset-bot bot commented Jan 24, 2023 •

edited

brophdawg11 Jan 26, 2023

brophdawg11 Jan 27, 2023

brophdawg11 Jan 27, 2023

brophdawg11 Jan 27, 2023

brophdawg11 Jan 27, 2023

brophdawg11 Jan 27, 2023

brophdawg11 Jan 27, 2023

appden commented Feb 28, 2023 •

edited

cliffordfajardo Feb 28, 2023 •

edited

brophdawg11 commented Apr 25, 2023

kstratis commented Oct 12, 2023

brophdawg11 commented Oct 12, 2023

kstratis commented Oct 12, 2023

Add route middleware functionality #9975

Add route middleware functionality #9975

Conversation

brophdawg11 commented Jan 24, 2023 • edited

changeset-bot bot commented Jan 24, 2023 • edited

🦋 Changeset detected

brophdawg11 Jan 26, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

brophdawg11 Jan 27, 2023

Choose a reason for hiding this comment

appden commented Feb 28, 2023 • edited

cliffordfajardo Feb 28, 2023 • edited

Choose a reason for hiding this comment

brophdawg11 commented Apr 25, 2023

kstratis commented Oct 12, 2023

brophdawg11 commented Oct 12, 2023

kstratis commented Oct 12, 2023

brophdawg11 commented Jan 24, 2023 •

edited

changeset-bot bot commented Jan 24, 2023 •

edited

appden commented Feb 28, 2023 •

edited

cliffordfajardo Feb 28, 2023 •

edited