-
Notifications
You must be signed in to change notification settings - Fork 384
Closed
Labels
Description
What problem does this feature solve?
User need get some tools from dataLoader Context.
So Modern.js need injects some tools to dataLoaderContext
What does the proposed API look like?
import { LoaderFunctionArgs } from '@modern-js/runtime/router';
import { 🔥xxxCtx } from '@modern-js/plugin-xx'
export default function ({ context }: LoaderFunctionArgs) {
const xxx = context?.get(xxxCtx);
// doSomethingOthers
}Reference from this discuss: Loader + Action Context (Middleware) and Closed PR: Add route middleware functionality
react-router prepare inject loader-middleware like this:
import {
createBrowserRouter,
createMiddlewareContext,
RouterProvider,
} from "react-router-dom";
import { getSession, commitSession } from "../session";
import { getPosts } from "../posts";
// 👉 Create strongly-typed contexts to use as keys for your middleware data
let userCtx = createMiddlewareContext<User>(null);
let sessionCtx = createMiddlewareContext<Session>(null);
const routes = [
{
path: "/",
// 👉 Define middleware on your routes
middleware: rootMiddleware,
children: [
{
path: "path",
loader: childLoader,
},
],
},
];
// Middlewares receive a context object with get/set/next methods
async function rootMiddleware({ request, context }) {
// 🔥 Load common information in one spot in your middleware and make it
// available to child middleware/loaders/actions
let session = await getSession(request.headers.get("Cookie"));
let user = await getUser(session);
context.set(userCtx, user);
context.set(sessionCtx, session);
// Call child middleware/loaders/actions
let response = await context.next();
// 🔥 Assign common response headers on the way out
response.headers.append("Set-Cookie", await commitSession(session));
return response;
}
async function childLoader({ context }) {
// 🔥 Read strongly-typed data from ancestor middlewares
let session = context.get(sessionCtx);
let user = context.get(userCtx);
let posts = await getPosts({ author: user.id });
return redirect(`/posts/${post.id}`);
}