Skip to content

[Feature]: Inject context to dataLoader Context #4473

@GiveMe-A-Name

Description

@GiveMe-A-Name

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}`);
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions