Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/fix ssg ssr init #172

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/web/app/not-found.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import NotFoundPage from "@pages/404";
import { WithLayout } from "app/layoutHOC";
import type { GetStaticPropsContext } from "next";

import { ssgInit } from "@server/lib/ssg";
import { getTranslations } from "@server/lib/getTranslations";

const getData = async (context: GetStaticPropsContext) => {
const ssg = await ssgInit(context);
const i18n = await getTranslations(context);

return {
dehydratedState: ssg.dehydrate(),
i18n,
};
};

Expand Down
3 changes: 2 additions & 1 deletion apps/web/lib/app-providers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type AppProps = Omit<
WithNonceProps<{
themeBasis?: string;
session: Session;
i18n?: SSRConfig;
}>
>
>,
Expand Down Expand Up @@ -108,7 +109,7 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
}, [locale]);

const clientViewerI18n = useViewerI18n(locale);
const i18n = clientViewerI18n.data?.i18n;
const i18n = clientViewerI18n.data?.i18n ?? props.pageProps.i18n;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what was the issue here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we allow passing i18n as prop. other alternative is to pass it in dehydratedState, but in this case we will have to use createProxySSGHelpers which requires trpc router.


const passedProps = {
...props,
Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/bookings/[status]/getStaticProps.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type GetStaticProps } from "next";
import { z } from "zod";

import { ssgInit } from "@server/lib/ssg";
import { getTranslations } from "@server/lib/getTranslations";

const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;

Expand All @@ -11,14 +11,14 @@ const querySchema = z.object({

export const getStaticProps: GetStaticProps = async (ctx) => {
const params = querySchema.safeParse(ctx.params);
const ssg = await ssgInit(ctx);
const i18n = await getTranslations(ctx);

if (!params.success) return { notFound: true };

return {
props: {
status: params.data.status,
trpcState: ssg.dehydrate(),
i18n,
},
};
};
6 changes: 3 additions & 3 deletions apps/web/pages/404.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Discord } from "@calcom/ui/components/icon/Discord";

import PageWrapper from "@components/PageWrapper";

import { ssgInit } from "@server/lib/ssg";
import { getTranslations } from "@server/lib/getTranslations";

enum pageType {
ORG = "org",
Expand Down Expand Up @@ -273,11 +273,11 @@ export default function Custom404() {
Custom404.PageWrapper = PageWrapper;

export const getStaticProps = async (context: GetStaticPropsContext) => {
const ssr = await ssgInit(context);
const i18n = await getTranslations(context);

return {
props: {
trpcState: ssr.dehydrate(),
i18n,
},
};
};
6 changes: 3 additions & 3 deletions apps/web/pages/auth/error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { X } from "@calcom/ui/components/icon";
import PageWrapper from "@components/PageWrapper";
import AuthContainer from "@components/ui/AuthContainer";

import { ssgInit } from "@server/lib/ssg";
import { getTranslations } from "@server/lib/getTranslations";

const querySchema = z.object({
error: z.string().optional(),
Expand Down Expand Up @@ -50,11 +50,11 @@ export default function Error() {
Error.PageWrapper = PageWrapper;

export const getStaticProps = async (context: GetStaticPropsContext) => {
const ssr = await ssgInit(context);
const i18n = await getTranslations(context);

return {
props: {
trpcState: ssr.dehydrate(),
i18n,
},
};
};
22 changes: 22 additions & 0 deletions apps/web/server/lib/getTranslations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { GetStaticPropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { i18n } = require("@calcom/config/next-i18next.config");

export async function getTranslations<TParams extends { locale?: string }>(
opts: GetStaticPropsContext<TParams>
) {
const requestedLocale = opts.params?.locale || opts.locale || i18n.defaultLocale;
const isSupportedLocale = i18n.locales.includes(requestedLocale);
if (!isSupportedLocale) {
console.warn(`Requested unsupported locale "${requestedLocale}"`);
}
const locale = isSupportedLocale ? requestedLocale : i18n.defaultLocale;

const _i18n = await serverSideTranslations(locale, ["common"]);

return {
i18n: _i18n,
};
}
44 changes: 42 additions & 2 deletions apps/web/server/lib/ssr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,51 @@ import type { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import superjson from "superjson";

import { forms } from "@calcom/app-store/routing-forms/trpc/procedures/forms";
import { getLocale } from "@calcom/features/auth/lib/getLocale";
import { map } from "@calcom/features/flags/server/procedures/map";
import { CALCOM_VERSION } from "@calcom/lib/constants";
import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
import { createContext } from "@calcom/trpc/server/createContext";
import { appRouter } from "@calcom/trpc/server/routers/_app";
import { me } from "@calcom/trpc/server/routers/loggedInViewer/procedures/me";
import { teamsAndUserProfilesQuery } from "@calcom/trpc/server/routers/loggedInViewer/procedures/teamsAndUserProfilesQuery";
import { event } from "@calcom/trpc/server/routers/publicViewer/procedures/event";
import { session } from "@calcom/trpc/server/routers/publicViewer/procedures/session";
import { get } from "@calcom/trpc/server/routers/viewer/eventTypes/procedures/get";
import { hasTeamPlan } from "@calcom/trpc/server/routers/viewer/teams/procedures/hasTeamPlan";
import { router, mergeRouters } from "@calcom/trpc/server/trpc";

const loggedInRouter = router({
me,
});

// Temporary workaround for OOM issue, import only procedures that are called on the server side
const routerSlice = router({
viewer: mergeRouters(
loggedInRouter,
router({
features: router({
map,
}),
public: router({
session,
event,
}),
teams: router({
hasTeamPlan,
}),
appRoutingForms: router({
forms,
}),
teamsAndUserProfilesQuery: router({
teamsAndUserProfilesQuery,
}),
eventTypes: router({
get,
}),
})
),
});

/**
* Initialize server-side rendering tRPC helpers.
Expand All @@ -20,7 +60,7 @@ export async function ssrInit(context: GetServerSidePropsContext, options?: { no
const i18n = await serverSideTranslations(locale, ["common", "vital"]);

const ssr = createProxySSGHelpers({
router: appRouter,
router: routerSlice,
transformer: superjson,
ctx: { ...ctx, locale, i18n },
});
Expand Down
7 changes: 2 additions & 5 deletions packages/app-store/routing-forms/trpc/_router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { router } from "@calcom/trpc/server/trpc";
import { ZDeleteFormInputSchema } from "./deleteForm.schema";
import { ZFormMutationInputSchema } from "./formMutation.schema";
import { ZFormQueryInputSchema } from "./formQuery.schema";
import { ZFormsInputSchema } from "./forms.schema";
import { forms } from "./procedures/forms";
import { ZReportInputSchema } from "./report.schema";
import { ZResponseInputSchema } from "./response.schema";

Expand Down Expand Up @@ -50,10 +50,7 @@ const appRoutingForms = router({
return handler({ ctx, input });
}),
}),
forms: authedProcedure.input(ZFormsInputSchema).query(async ({ ctx, input }) => {
const handler = await getHandler("forms", () => import("./forms.handler"));
return handler({ ctx, input });
}),
forms,
formQuery: authedProcedure.input(ZFormQueryInputSchema).query(async ({ ctx, input }) => {
const handler = await getHandler("formQuery", () => import("./formQuery.handler"));
return handler({ ctx, input });
Expand Down
8 changes: 8 additions & 0 deletions packages/app-store/routing-forms/trpc/procedures/forms.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import authedProcedure from "@calcom/trpc/server/procedures/authedProcedure";

import { ZFormsInputSchema } from "../forms.schema";

export const forms = authedProcedure.input(ZFormsInputSchema).query(async ({ ctx, input }) => {
const handler = (await import("../forms.handler")).default;
return handler({ ctx, input });
});
8 changes: 8 additions & 0 deletions packages/features/flags/server/procedures/map.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import publicProcedure from "@calcom/trpc/server/procedures/publicProcedure";

import { getFeatureFlagMap } from "../utils";

export const map = publicProcedure.query(async ({ ctx }) => {
const { prisma } = ctx;
return getFeatureFlagMap(prisma);
});
7 changes: 2 additions & 5 deletions packages/features/flags/server/router.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import publicProcedure from "@calcom/trpc/server/procedures/publicProcedure";
import { router } from "@calcom/trpc/server/trpc";

import { getFeatureFlagMap } from "./utils";
import { map } from "./procedures/map";

export const featureFlagRouter = router({
list: publicProcedure.query(async ({ ctx }) => {
Expand All @@ -11,8 +11,5 @@ export const featureFlagRouter = router({
cacheStrategy: { swr: 300, ttl: 300 },
});
}),
map: publicProcedure.query(async ({ ctx }) => {
const { prisma } = ctx;
return getFeatureFlagMap(prisma);
}),
map,
});
30 changes: 4 additions & 26 deletions packages/trpc/server/routers/loggedInViewer/_router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { ZGetDownloadLinkOfCalVideoRecordingsInputSchema } from "./getDownloadLi
import { ZIntegrationsInputSchema } from "./integrations.schema";
import { ZLocationOptionsInputSchema } from "./locationOptions.schema";
import { ZOutOfOfficeInputSchema, ZOutOfOfficeDelete } from "./outOfOffice.schema";
import { me } from "./procedures/me";
import { teamsAndUserProfilesQuery } from "./procedures/teamsAndUserProfilesQuery";
import { ZRoutingFormOrderInputSchema } from "./routingFormOrder.schema";
import { ZSetDestinationCalendarInputSchema } from "./setDestinationCalendar.schema";
import { ZSubmitFeedbackInputSchema } from "./submitFeedback.schema";
Expand Down Expand Up @@ -56,18 +58,7 @@ type AppsRouterHandlerCache = {
const UNSTABLE_HANDLER_CACHE: AppsRouterHandlerCache = {};

export const loggedInViewerRouter = router({
me: authedProcedure.query(async ({ ctx }) => {
if (!UNSTABLE_HANDLER_CACHE.me) {
UNSTABLE_HANDLER_CACHE.me = (await import("./me.handler")).meHandler;
}

// Unreachable code but required for type safety
if (!UNSTABLE_HANDLER_CACHE.me) {
throw new Error("Failed to load handler");
}

return UNSTABLE_HANDLER_CACHE.me({ ctx });
}),
me,

avatar: authedProcedure.query(async ({ ctx }) => {
if (!UNSTABLE_HANDLER_CACHE.avatar) {
Expand Down Expand Up @@ -424,20 +415,7 @@ export const loggedInViewerRouter = router({

return UNSTABLE_HANDLER_CACHE.shouldVerifyEmail({ ctx });
}),
teamsAndUserProfilesQuery: authedProcedure.query(async ({ ctx }) => {
if (!UNSTABLE_HANDLER_CACHE.teamsAndUserProfilesQuery) {
UNSTABLE_HANDLER_CACHE.teamsAndUserProfilesQuery = (
await import("./teamsAndUserProfilesQuery.handler")
).teamsAndUserProfilesQuery;
}

// Unreachable code but required for type safety
if (!UNSTABLE_HANDLER_CACHE.teamsAndUserProfilesQuery) {
throw new Error("Failed to load handler");
}

return UNSTABLE_HANDLER_CACHE.teamsAndUserProfilesQuery({ ctx });
}),
teamsAndUserProfilesQuery,
connectAndJoin: authedProcedure.input(ZConnectAndJoinInputSchema).mutation(async ({ ctx, input }) => {
if (!UNSTABLE_HANDLER_CACHE.connectAndJoin) {
UNSTABLE_HANDLER_CACHE.connectAndJoin = (await import("./connectAndJoin.handler")).Handler;
Expand Down
7 changes: 7 additions & 0 deletions packages/trpc/server/routers/loggedInViewer/procedures/me.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import authedProcedure from "../../../procedures/authedProcedure";

export const me = authedProcedure.query(async ({ ctx }) => {
const handler = (await import("../me.handler")).meHandler;

return handler({ ctx });
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import authedProcedure from "../../../procedures/authedProcedure";

export const teamsAndUserProfilesQuery = authedProcedure.query(async ({ ctx }) => {
const handler = (await import("../teamsAndUserProfilesQuery.handler")).teamsAndUserProfilesQuery;

return handler({ ctx });
});
14 changes: 4 additions & 10 deletions packages/trpc/server/routers/publicViewer/_router.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import sessionMiddleware from "../../middlewares/sessionMiddleware";
import publicProcedure from "../../procedures/publicProcedure";
import { importHandler, router } from "../../trpc";
import { slotsRouter } from "../viewer/slots/_router";
import { ZEventInputSchema } from "./event.schema";
import { i18nInputSchema } from "./i18n.schema";
import { event } from "./procedures/event";
import { session } from "./procedures/session";
import { ZSamlTenantProductInputSchema } from "./samlTenantProduct.schema";
import { ZStripeCheckoutSessionInputSchema } from "./stripeCheckoutSession.schema";

Expand All @@ -13,10 +13,7 @@ const namespaced = (s: string) => `${NAMESPACE}.${s}`;

// things that unauthenticated users can query about themselves
export const publicViewerRouter = router({
session: publicProcedure.use(sessionMiddleware).query(async (opts) => {
const handler = await importHandler(namespaced("session"), () => import("./session.handler"));
return handler(opts);
}),
session,
i18n: publicProcedure.input(i18nInputSchema).query(async (opts) => {
const handler = await importHandler(namespaced("i18n"), () => import("./i18n.handler"));
return handler(opts);
Expand Down Expand Up @@ -45,10 +42,7 @@ export const publicViewerRouter = router({
}),
// REVIEW: This router is part of both the public and private viewer router?
slots: slotsRouter,
event: publicProcedure.input(ZEventInputSchema).query(async (opts) => {
const handler = await importHandler(namespaced("event"), () => import("./event.handler"));
return handler(opts);
}),
event,
ssoConnections: publicProcedure.query(async () => {
const handler = await importHandler(
namespaced("ssoConnections"),
Expand Down
11 changes: 11 additions & 0 deletions packages/trpc/server/routers/publicViewer/procedures/event.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import publicProcedure from "../../../procedures/publicProcedure";
import { importHandler } from "../../../trpc";
import { ZEventInputSchema } from "../event.schema";

const NAMESPACE = "publicViewer";
const namespaced = (s: string) => `${NAMESPACE}.${s}`;

export const event = publicProcedure.input(ZEventInputSchema).query(async (opts) => {
const handler = await importHandler(namespaced("event"), () => import("../event.handler"));
return handler(opts);
});
12 changes: 12 additions & 0 deletions packages/trpc/server/routers/publicViewer/procedures/session.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import sessionMiddleware from "../../../middlewares/sessionMiddleware";
import publicProcedure from "../../../procedures/publicProcedure";
import { importHandler } from "../../../trpc";

const NAMESPACE = "publicViewer";

const namespaced = (s: string) => `${NAMESPACE}.${s}`;

export const session = publicProcedure.use(sessionMiddleware).query(async (opts) => {
const handler = await importHandler(namespaced("session"), () => import("../session.handler"));
return handler(opts);
});
Loading
Loading