Files
webstudio/apps/builder/app/shared/context.server.ts
T
Ivan Starkov 9c672cecc9 feat: TRPC caching support (#3016)
## Description

trpc procedures can be cached if wrapped with

```js
const cacheMiddleware = createCacheMiddleware(60 * 3); // 60 * 3 = 3 minutes cache
const cachedProcedure = procedure.use(cacheMiddleware);
```

Implementation supports trpc batching.
1. If any of calls inside trpc batch is not cacheable - nothing will be
cached.
2. If all trpc batch calls can be cached then the least max age among
all calls is selected for caching


- [ ] - Test caching on PR

## Steps for reproduction

Open marketplace, see trpc request has cache headers, see trpc request
has cache HIT from vercel or cloudflare

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
2024-03-14 20:18:44 +03:00

124 lines
3.3 KiB
TypeScript

import type { AppContext } from "@webstudio-is/trpc-interface/index.server";
import env from "~/env/env.server";
import { authenticator } from "~/services/auth.server";
import { trpcSharedClient } from "~/services/trpc.server";
import { entryApi } from "./entri/entri-api.server";
import {
getTokenPlanFeatures,
getUserPlanFeatures,
} from "./db/user-plan-features.server";
import { getAllApprovedProjectIds } from "./marketplace/db.server";
const createAuthorizationContext = async (
request: Request
): Promise<AppContext["authorization"]> => {
const url = new URL(request.url);
const authToken =
url.searchParams.get("authToken") ??
request.headers.get("x-auth-token") ??
url.hostname;
const user = await authenticator.isAuthenticated(request);
const marketplaceProjectIds = await getAllApprovedProjectIds();
const isServiceCall =
request.headers.has("Authorization") &&
request.headers.get("Authorization") === env.TRPC_SERVER_API_TOKEN;
const context: AppContext["authorization"] = {
userId: user?.id,
authToken,
isServiceCall,
marketplaceProjectIds,
authorizeTrpc: trpcSharedClient.authorize,
};
return context;
};
const createDomainContext = (request: Request) => {
const context: AppContext["domain"] = {
domainTrpc: trpcSharedClient.domain,
};
return context;
};
const createDeploymentContext = (request: Request) => {
const url = new URL(request.url);
const context: AppContext["deployment"] = {
deploymentTrpc: trpcSharedClient.deployment,
env: {
BUILDER_ORIGIN: url.origin,
BRANCH_NAME: env.BRANCH_NAME ?? "main",
},
};
return context;
};
const createEntriContext = () => {
return {
entryApi,
};
};
const createUserPlanContext = async (
request: Request,
authorization: AppContext["authorization"]
) => {
const url = new URL(request.url);
const authToken = url.searchParams.get("authToken");
// When a shared link is accessed, identified by the presence of an authToken,
// the system retrieves the plan features associated with the project owner's account.
if (authToken !== null) {
const planFeatures = await getTokenPlanFeatures(authToken);
return planFeatures;
}
const user = await authenticator.isAuthenticated(request);
const planFeatures = user?.id ? getUserPlanFeatures(user.id) : undefined;
return planFeatures;
};
const createTrpcCache = () => {
const proceduresMaxAge = new Map<string, number>();
const setMaxAge = (path: string, value: number) => {
proceduresMaxAge.set(
path,
Math.min(proceduresMaxAge.get(path) ?? Number.MAX_SAFE_INTEGER, value)
);
};
const getMaxAge = (path: string) => proceduresMaxAge.get(path);
return {
setMaxAge,
getMaxAge,
};
};
/**
* argument buildEnv==="prod" only if we are loading project with production build
*/
export const createContext = async (request: Request): Promise<AppContext> => {
const authorization = await createAuthorizationContext(request);
const domain = createDomainContext(request);
const deployment = createDeploymentContext(request);
const entri = createEntriContext();
const userPlanFeatures = await createUserPlanContext(request, authorization);
const trpcCache = createTrpcCache();
return {
authorization,
domain,
deployment,
entri,
userPlanFeatures,
trpcCache,
};
};