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

mrge-io

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.

hbjORbj · 2025-04-21T13:56:02Z

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

+  if (!workflowData) return notFound();
+
+  const isOrg = workflowData?.team?.isOrganization ?? false;
+  const teamId = workflowData?.teamId ?? undefined;


Q: what happens when teamId is undefined? does it break anything? if so, shouldn't we show 404 page?

In that case it returns [] - empty array same as what we have as fallback rn , nothing's breaking

We can improve it by skipping the verifiedNumbers call if teamId is undefined and return [] straight away

hbjORbj · 2025-04-21T13:58:57Z

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

@@ -34,7 +34,7 @@ function UsersTable({ setSMSLockState }: Props) {
  const { data: usersAndTeams } = trpc.viewer.admin.getSMSLockStateTeamsUsers.useQuery();

  if (!usersAndTeams) {
-    return <></>;
+    return null;


can you explain why this change was necessary?

Just for better readability/code quality

hbjORbj · 2025-04-21T14:09:36Z

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

  const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false);
  const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(false);
  const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(false);
-  const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery();


This query should stay client-side because the "Add action" Dialog should not block the initial load. For example, imagine that the query fetching for Add Action Dialog failed. Now it blocks the entire page load. Handling a query failure is another topic, but I am mentioning it to help you decide which is something you should fetch server-side vs client-side. The more server-side fetching we do, the slower the initial load is, and hence we should determine carefully which queries to turn to server-side and keep client-side.

So, Please think about this for other queries you switched to server-side in this PR and make changes accordingly!

So basically we where doing this same call two times : one for the page (form) and another for this Dialog so I just removed it from here and passed from the page - I understand your concerns but that's not the case here

I don't think you understood my point. I am saying we should not have workflowCaller.getWorkflowActionOptions() in RSC.

You mean - we should call getWorkflowActionOptions client side and pass to this modal as well (as we are already doing in this PR) , sounds good btw

You can simply let const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery(); just stay in packages/features/ee/workflows/components/AddActionDialog.tsx unless you have a better optimization in mind.

You can simply let const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery(); just stay in packages/features/ee/workflows/components/AddActionDialog.tsx unless you have a better optimization in mind.

Then we'll end up doing two calls for actionOptions as soon as the page renders (current behaviour on prod) - one in WorkflowDetailsPage.tsx and another in AddActionDialog.tsx (we require this data on both places)

I have updated it to call just once just inside WorkflowDetailsPage and simply pass it to AddActionDialog as prop
Thoughts ?

That sounds good but is it necessary? Client-side trpc queries are cached, no? especially since these two queries happen almost at the same time?

I love to avoid prop drilling as much as possible unless it's necessary

Would be great to have you test this quickly 🙏

The API calls increases making them look lot more - having one looked clean to me , anyways I have added an trpc call in the Dialog as well

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

E2E results are ready!

Workflow #57498.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

mrge-io

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

mrge-io · 2025-04-21T14:42:08Z

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

-    }
-  }, [isPending]);
+    setFormData(workflow);
+  }, []);


Empty dependency array in useEffect where workflow dependency is used

mrge-io · 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.

mrge-io · 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

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

mrge-io 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

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

mrge-io 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

TusharBhatt1 commented Apr 20, 2025 •

edited

Loading

vercel bot commented Apr 20, 2025

github-actions bot commented Apr 20, 2025 •

edited

Loading

mrge-io bot left a comment

graphite-app bot commented Apr 20, 2025

TusharBhatt1 Apr 20, 2025

hbjORbj left a comment

hbjORbj Apr 21, 2025

TusharBhatt1 Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025

hbjORbj Apr 21, 2025

TusharBhatt1 Apr 21, 2025

hbjORbj Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

hbjORbj Apr 21, 2025

TusharBhatt1 Apr 21, 2025 •

edited

Loading

hbjORbj Apr 21, 2025

TusharBhatt1 Apr 21, 2025 •

edited

Loading

hbjORbj Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025 •

edited

Loading

TusharBhatt1 commented Apr 21, 2025

mrge-io bot left a comment

mrge-io bot Apr 21, 2025

mrge-io bot Apr 21, 2025

mrge-io bot Apr 21, 2025

hbjORbj commented Apr 21, 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

What does this PR do?

Visual Demo (For contributors especially)

Mandatory Tasks (DO NOT REMOVE)

Summary by mrge

vercel bot commented Apr 20, 2025

github-actions bot commented Apr 20, 2025 • edited Loading

mrge-io bot left a comment

Choose a reason for hiding this comment

graphite-app bot commented Apr 20, 2025

Graphite Automations

TusharBhatt1 Apr 20, 2025

Choose a reason for hiding this comment

hbjORbj left a comment

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

hbjORbj Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

TusharBhatt1 Apr 21, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Apr 21, 2025 • edited Loading

E2E results are ready!

TusharBhatt1 commented Apr 21, 2025

mrge-io bot left a comment

Choose a reason for hiding this comment

mrge-io bot Apr 21, 2025

Choose a reason for hiding this comment

mrge-io bot Apr 21, 2025

Choose a reason for hiding this comment

mrge-io bot Apr 21, 2025

Choose a reason for hiding this comment

hbjORbj commented Apr 21, 2025

TusharBhatt1 commented Apr 20, 2025 •

edited

Loading

github-actions bot commented Apr 20, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

hbjORbj Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

hbjORbj Apr 21, 2025 •

edited

Loading

TusharBhatt1 Apr 21, 2025 •

edited

Loading

github-actions bot commented Apr 21, 2025 •

edited

Loading