Create a getRequest() global function or similar

[gabbanaesteban]

What problem does this feature solve?

Currently, the only way to access the request object in a Remix application is through loaders/actions, which limits the ability to access request information deeper in the application.

Use-Case:

You need to filter an entity by the user id and log the activity (view, read, etc)

You can either have:

• Fat loaders/actions: where all the business logic is consolidated, including retrieving query params, form data, and validating inputs before executing the business logic. While this can be a solution, it can also make the loader/action difficult to maintain and manage, especially as the application grows and becomes more complex.

• Argument propagation: Pass the user down to all the functions/methods that require it, which can be cumbersome and tedious.

What does the proposed API look like?

The proposed API adds a new function, getRequest(), that can be used to get the current request object anywhere in the app. Here's an example of how it might be used:

// at app/services/Posts/getPost.ts
const user = await authenticator.isAuthenticated(getRequest());

// use User data

or

// at app/services/Activities/logView.ts
const user = await authenticator.isAuthenticated(getRequest());

// use User data

By providing this global function, developers can access request information more easily and avoid the need to pass request objects or user object (in this case) around the application.

[ryanflorence]

Most JS runtimes can handle multiple requests at the same time, so it's not as simple as dumping the request in a global somewhere (the next request will override it).

Might be able to do that in Node.js (in remix or just your app code) by creating a continuation local storage with Node's async hooks.

I'm not sure the other runtimes like cloudflare, fastly, etc. have something like that though.

[sergiodxa]

I think Cloudflare always runs a new Edge function so it should be possible to go to the server file where the adapters lives and do global.request = request

[cliffordfajardo]

Looks like you're using Remix Auth
Currently you do have to duplicate this logic in your loaders, perhaps until the middleware API releases in the near future;
One option is to create a helper function that you can user in your loader

// helpers/logActivity.server.ts
function logActivity(user){
    // log activity logic based on the user
} 


// route/some_route.tsx
export function loader({request}) {
   const user = await authenticator.isAuthenticated(request);
    logActivity(user);
}

[nadiTime]

@gabbanaesteban did you find any solution? I'm also looking for something similar. So I can access cookies on server side without explicitly passing the request object...

[gabbanaesteban]

Not really. I would just wait for middleware API, it is planned already.
Also Single fetch is in progress already.

[cliffordfajardo]

The proposed API adds a new function, getRequest(), that can be used to get the current request object anywhere in the app. - @gabbanaesteban

Recently saw that SolidJS's metaframework called solidStart has a similar concept to the proposed idea above called getRequestEvent

import { getRequestEvent } from "solid-js/web";

const event = getRequestEvent();
console.log(event.request.url);

event.response.headers.set("x-foo", "bar");
console.log(event.response.status);
event.response.status = 201;

More details in their recent announcement:

• https://github.com/solidjs/solid-start/releases/tag/v0.5.0
• https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/server.js

Example usage of the API:

• https://grep.app/search?current=2&q=getRequestEvent&filter[lang][0]=TypeScript&filter[lang][1]=TSX&filter[lang][2]=JavaScript

[koderyoda]

I need the request object inside the headers function to check an incoming cookie and weirdly enough it's not there in the params. There is all of this:
export type HeadersArgs = { loaderHeaders: Headers; parentHeaders: Headers; actionHeaders: Headers; errorHeaders: Headers | undefined; };
but no request object to pull the cookies from.