perf: fetch server side data for workflow details page #20778

TusharBhatt1 · 2025-04-20T16:31:46Z

What does this PR do?

This PR moves all the /workflows/[id] data fetching to server side.

Visual Demo (For contributors especially)

Before :

After:

dynamic-worklflows.mp4

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

Summary by mrge

Moved all data fetching for the /workflows/[id] page to the server side to improve performance and reliability.

Refactors
- Replaced client-side data fetching with server-side calls for workflow details, user info, and related data.
- Updated components to accept server-fetched data as props.

vercel · 2025-04-20T16:31:50Z

@TusharBhatt1 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-04-20T16:31:54Z

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "Perf/fetch server side data for dynamic webflow page". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

cubic-dev-ai

mrge found 3 issues across 5 files. View them in mrge.io

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

graphite-app · 2025-04-20T16:35:12Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (04/20/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (04/20/25)

1 label was added to this PR based on Keith Williams's automation.

TusharBhatt1 · 2025-04-20T18:50:33Z

packages/features/ee/workflows/pages/workflow.tsx

-      teamId: workflow?.team?.id,
-    },
-    { enabled: !verifiedEmailsProp }
-  );


Moved to server side

…ic-webflow-page

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

…low-page

hbjORbj

Great job Tushar! That was fast. But this requires some changes.

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

apps/web/modules/settings/admin/components/UsersTable.tsx

packages/features/ee/workflows/components/AddActionDialog.tsx

github-actions · 2025-04-21T14:18:45Z

E2E results are ready!

Workflow #65123.1 latest results

TusharBhatt1 · 2025-04-21T14:39:23Z

Great job Tushar! That was fast. But this requires some changes.

Thanks @hbjORbj , I have addresed them all - can you have a look

cubic-dev-ai

mrge found 3 issues across 7 files. View them in mrge.io

packages/features/ee/workflows/pages/workflow.tsx

cubic-dev-ai · 2025-04-21T14:42:08Z

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

-  //     teamId: workflow?.team?.id,
-  //   });
-  // } catch (err) {}
+  const [verifiedEmails, verifiedNumbers, eventsData, user, actionOptions] = await Promise.all([


Using index-based destructuring from Promise.all results can be error-prone if the order of promises changes in the future.

cubic-dev-ai · 2025-04-21T14:42:08Z

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

-  //     teamId: workflow?.team?.id,
-  //   });
-  // } catch (err) {}
+  const [verifiedEmails, verifiedNumbers, eventsData, user, actionOptions] = await Promise.all([


Missing error handling for Promise.all. If any of these async calls fail, the entire page will fail.

hbjORbj · 2025-04-21T14:43:43Z

@TusharBhatt1 Please review my comments more carefully and only ping me after more careful review of your code yourself. As I mentioned before, let's minimize the number of ping pongs as much as possible. Don't wanna spend 7-8 ping-pongs on a small change like the last time.

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

github-actions · 2025-05-08T00:24:46Z

This PR is being marked as stale due to inactivity.

anikdhabal · 2025-06-19T03:30:11Z

Closing due to inactivity. Feel free to tag me if you wanted to continue 🙏

…low-page

Amit91848

Can follow the new pattern here as well 🙏

Amit91848 · 2025-06-29T07:21:11Z

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

+  const [workflowCaller, eventCaller, userCaller] = await Promise.all([
+    createRouterCaller(workflowsRouter),
+    createRouterCaller(eventTypesRouter),
+    createRouterCaller(meRouter),
+  ]);


Can directly use Repository methods inside unstable_cache here wherever possible
https://github.com/calcom/cal.com/pull/20773/files#r2173620412

Amit91848 · 2025-06-29T07:21:30Z

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

+  const [verifiedEmails, verifiedNumbers, eventsData, user] = await Promise.all([
+    workflowCaller.getVerifiedEmails({ teamId }),
+    teamId ? workflowCaller.getVerifiedNumbers({ teamId }) : Promise.resolve([]),
+    eventCaller.getTeamAndEventTypeOptions({ teamId, isOrg }),
+    userCaller.get(),


Same here
https://github.com/calcom/cal.com/pull/20773/files#r2173620412

…low-page

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

TusharBhatt1 added 2 commits April 20, 2025 21:40

perf:fetch-server-side-data-for-dynamic-webflow-page

32fde0b

skeleton

4f1b698

graphite-app bot added the community Created by Linear-GitHub Sync label Apr 20, 2025

graphite-app bot requested a review from a team April 20, 2025 16:31

keithwillcode added the community-interns The team responsible for reviewing, testing and shipping low/medium community PRs label Apr 20, 2025

dosubot bot added performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive workflows area: workflows, automations labels Apr 20, 2025

cubic-dev-ai bot reviewed Apr 20, 2025

View reviewed changes

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx Outdated Show resolved Hide resolved

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx Outdated Show resolved Hide resolved

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx Show resolved Hide resolved

TusharBhatt1 added 4 commits April 20, 2025 22:26

suggested-changes

87a241e

type check

b189e51

skeleton

fbae058

type-check

9ceafca

TusharBhatt1 changed the title ~~Perf/fetch server side data for dynamic webflow page~~ perf: fetch server side data for dynamic webflow page Apr 20, 2025

TusharBhatt1 commented Apr 20, 2025

View reviewed changes

TusharBhatt1 and others added 8 commits April 21, 2025 00:46

dynamic shell name

e2eb382

type-check

7663a7f

type-check

62da080

one more call to ss

efcd593

Merge branch 'calcom:main' into perf/fetch-server-side-data-for-dynam…

2ca0c44

…ic-webflow-page

skeleton

6dc25e0

Merge branch 'perf/fetch-server-side-data-for-dynamic-webflow-page' of …

1ffde98

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

Merge branch 'main' into perf/fetch-server-side-data-for-dynamic-webf…

dc7f475

…low-page

hbjORbj added the ready-for-e2e label Apr 21, 2025

hbjORbj requested changes Apr 21, 2025

View reviewed changes

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx Show resolved Hide resolved

apps/web/modules/settings/admin/components/UsersTable.tsx Show resolved Hide resolved

packages/features/ee/workflows/components/AddActionDialog.tsx Show resolved Hide resolved

github-actions bot marked this pull request as draft April 21, 2025 14:11

TusharBhatt1 marked this pull request as ready for review April 21, 2025 14:38

hbjORbj changed the title ~~perf: fetch server side data for dynamic webflow page~~ perf: fetch server side data for workflow details page Apr 21, 2025

cubic-dev-ai bot reviewed Apr 21, 2025

View reviewed changes

TusharBhatt1 added 4 commits April 21, 2025 20:25

optimie queries

c15e43f

moved actionOptions call back to client side

38651fe

Merge branch 'perf/fetch-server-side-data-for-dynamic-webflow-page' of …

30f93d8

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

final-change

af4424e

github-actions bot added the Stale label May 8, 2025

anikdhabal closed this Jun 19, 2025

fix: ts error

76b65aa

Amit91848 reopened this Jun 29, 2025

Merge branch 'main' into perf/fetch-server-side-data-for-dynamic-webf…

1014bf1

…low-page

Amit91848 requested changes Jun 29, 2025

View reviewed changes

github-actions bot marked this pull request as draft June 29, 2025 07:23

TusharBhatt1 and others added 4 commits June 29, 2025 22:58

adding revalidate and cache

9998a15

Merge branch 'main' into perf/fetch-server-side-data-for-dynamic-webf…

e390d98

…low-page

Merge branch 'perf/fetch-server-side-data-for-dynamic-webflow-page' of …

49b5bfe

…https://github.com/TusharBhatt1/cal.com into perf/fetch-server-side-data-for-dynamic-webflow-page

indentation

cb04804

github-actions bot removed the Stale label Jun 30, 2025

perf: fetch server side data for workflow details page #20778

Are you sure you want to change the base?

perf: fetch server side data for workflow details page #20778

Conversation

TusharBhatt1 commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Visual Demo (For contributors especially)

Mandatory Tasks (DO NOT REMOVE)

Summary by mrge

Uh oh!

vercel bot commented Apr 20, 2025

Uh oh!

github-actions bot commented Apr 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

graphite-app bot commented Apr 20, 2025

Graphite Automations

Uh oh!

TusharBhatt1 Apr 20, 2025

Choose a reason for hiding this comment

Uh oh!

hbjORbj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

TusharBhatt1 commented Apr 21, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai bot Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Apr 21, 2025

Choose a reason for hiding this comment

Uh oh!

hbjORbj commented Apr 21, 2025

Uh oh!

github-actions bot commented May 8, 2025

Uh oh!

anikdhabal commented Jun 19, 2025

Uh oh!

Amit91848 left a comment

Choose a reason for hiding this comment

Uh oh!

Amit91848 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

Amit91848 Jun 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

TusharBhatt1 commented Apr 20, 2025 •

edited

Loading

github-actions bot commented Apr 20, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025 •

edited

Loading