This is my directory structure pertaining to the question:

/app

/[orgId]

/product

/[projectId]

/items

/components

component-one.tsx

component-two.tsx

component-three.tsx

component-four.tsx

component-five.tsx

component-six.tsx

page.tsx

component-one through component-six are all client components tagged with “use client”. page.tsx dynamically imports component-one.tsx using next/dynamic, then component-one.tsx imports and uses component-two, and so forth.

In component-six.tsx, we have the following code snippet:

const { data: rowActivityLog, isFetching: isLoading } = useQuery({
    queryKey: ["row-activity-log"],
    queryFn: () =>
      getRowActivityLog(
        projectId,
        rowOriginal.custom_table_id,
        rowOriginal.id
      ).catch(() => {
        console.log("Error fetching row updates");
        return {
          status_code: 500,
          detail: "Error fetching row updates",
          data: [],
        };
      }),
  });
  const queryClient = useQueryClient();
  useEffect(() => {
    // Invalidate the query when the sheet is opened
    queryClient.invalidateQueries({ queryKey: ["row-activity-log"] });
  }, [queryClient]);

This api call is causing a timeout issue in deployment, and vercel support is saying to simply increase the timeout, but we don’t think that is the root cause. Anyone of help here?