fix: frontend build (#1271)

* Upgrade Next and Apollo on the frontend
* Added SSG for OSO, which seems to be a requirement now. For static
  exports you must have a non-empty list of paths to generate.
* Removing user_namespace from graphql queries. This was inadvertantly
  removed, which causes the queries to fail on build. This will need to
  be re-added later
* Removed searchParams from project and artifact pages. This was causing
  an error with requiring Suspense. We don't use it anymore, can re-add
  it later if necessary

apps/docs/package.json

@@ -27,7 +27,7 @@
     "@docusaurus/theme-common": "3.1.1",
     "@laxels/docusaurus-plugin-segment": "^1.0.6",
     "@mdx-js/react": "^3.0.0",
-    "@plasmicapp/react-web": "^0.2.324",
+    "@plasmicapp/react-web": "^0.2.329",
     "clsx": "^2.1.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",

apps/frontend/app/artifact/[namespace]/[type]/[...name]/page.tsx

@@ -10,30 +10,35 @@ import {
   pathToNamespaceEnum,
   pathToTypeEnum,
 } from "../../../../../lib/paths";
-import { STATIC_EXPORT } from "../../../../../lib/config";
 
-// Using incremental static regeneration, will invalidate this page
-// after this (no deploy webhooks needed)
-export const dynamic = STATIC_EXPORT ? "force-static" : "force-dynamic";
+const PLASMIC_COMPONENT = "ArtifactPage";
+//export const dynamic = STATIC_EXPORT ? "force-static" : "force-dynamic";
+export const dynamic = "force-static";
+export const dynamicParams = true;
 export const revalidate = false; // 3600 = 1 hour
+// TODO: This cannot be empty due to this bug
+// https://github.com/vercel/next.js/issues/61213
 const STATIC_EXPORT_PARAMS = [
   {
-    namespace: "IGNORE",
-    type: "IGNORE",
-    name: ["IGNORE"],
+    namespace: "github",
+    type: "repo",
+    name: ["opensource-observer", "oso"],
   },
 ];
-const PLASMIC_COMPONENT = "ArtifactPage";
-
-const cachedFetchComponent = cache(async (componentName: string) => {
-  const plasmicData = await PLASMIC.fetchComponentData(componentName);
-  return plasmicData;
-});
-
 export async function generateStaticParams() {
   return STATIC_EXPORT_PARAMS;
 }
 
+const cachedFetchComponent = cache(async (componentName: string) => {
+  try {
+    const plasmicData = await PLASMIC.fetchComponentData(componentName);
+    return plasmicData;
+  } catch (e) {
+    logger.warn(e);
+    return null;
+  }
+});
+
 /**
  * This SSR route allows us to fetch the project from the database
  * on the first HTTP request, which should be faster than fetching it client-side
@@ -45,11 +50,10 @@ type ArtifactPageProps = {
     type: string;
     name: string[];
   };
-  searchParams?: Record<string, string | string[]>;
 };
 
 export default async function ArtifactPage(props: ArtifactPageProps) {
-  const { params, searchParams } = props;
+  const { params } = props;
   const namespace = pathToNamespaceEnum(params.namespace);
   const type = pathToTypeEnum(params.type);
   const name = catchallPathToString(params.name);
@@ -80,13 +84,16 @@ export default async function ArtifactPage(props: ArtifactPageProps) {
 
   //console.log(artifact);
   const plasmicData = await cachedFetchComponent(PLASMIC_COMPONENT);
+  if (!plasmicData) {
+    logger.warn(`Unable to get componentName=${PLASMIC_COMPONENT}`);
+    notFound();
+  }
   const compMeta = plasmicData.entryCompMetas[0];
 
   return (
     <PlasmicClientRootProvider
       prefetchedData={plasmicData}
       pageParams={compMeta.params}
-      pageQuery={searchParams}
     >
       <PlasmicComponent
         component={compMeta.displayName}

apps/frontend/app/project/[...slug]/page.tsx

@@ -11,24 +11,31 @@ import {
 } from "../../../lib/graphql/cached-queries";
 import { logger } from "../../../lib/logger";
 import { catchallPathToString } from "../../../lib/paths";
-import { STATIC_EXPORT } from "../../../lib/config";
 
-export const dynamic = STATIC_EXPORT ? "force-static" : "force-dynamic";
-export const revalidate = false; // 3600 = 1 hour
-const STATIC_EXPORT_SLUGS = ["IGNORE"];
 const PLASMIC_COMPONENT = "ProjectPage";
-
-const cachedFetchComponent = cache(async (componentName: string) => {
-  const plasmicData = await PLASMIC.fetchComponentData(componentName);
-  return plasmicData;
-});
-
+//export const dynamic = STATIC_EXPORT ? "force-static" : "force-dynamic";
+export const dynamic = "force-static";
+export const dynamicParams = true;
+export const revalidate = false; // 3600 = 1 hour
+// TODO: This cannot be empty due to this bug
+// https://github.com/vercel/next.js/issues/61213
+const STATIC_EXPORT_SLUGS: string[] = ["opensource-observer"];
 export async function generateStaticParams() {
   return STATIC_EXPORT_SLUGS.map((s) => ({
     slug: [s],
   }));
 }
 
+const cachedFetchComponent = cache(async (componentName: string) => {
+  try {
+    const plasmicData = await PLASMIC.fetchComponentData(componentName);
+    return plasmicData;
+  } catch (e) {
+    logger.warn(e);
+    return null;
+  }
+});
+
 /**
  * This SSR route allows us to fetch the project from the database
  * on the first HTTP request, which should be faster than fetching it client-side
@@ -38,11 +45,10 @@ type ProjectPageProps = {
   params: {
     slug: string[];
   };
-  searchParams?: Record<string, string | string[]>;
 };
 
 export default async function ProjectPage(props: ProjectPageProps) {
-  const { params, searchParams } = props;
+  const { params } = props;
   const slugs = [catchallPathToString(params.slug)];
   if (!params.slug || !Array.isArray(params.slug) || params.slug.length < 1) {
     logger.warn("Invalid project page path", params);
@@ -77,13 +83,16 @@ export default async function ProjectPage(props: ProjectPageProps) {
 
   // Get Plasmic component
   const plasmicData = await cachedFetchComponent(PLASMIC_COMPONENT);
+  if (!plasmicData) {
+    logger.warn(`Unable to get componentName=${PLASMIC_COMPONENT}`);
+    notFound();
+  }
   const compMeta = plasmicData.entryCompMetas[0];
 
   return (
     <PlasmicClientRootProvider
       prefetchedData={plasmicData}
       pageParams={compMeta.params}
-      pageQuery={searchParams}
     >
       <PlasmicComponent
         component={compMeta.displayName}

apps/frontend/lib/graphql/queries.ts

@@ -64,7 +64,6 @@ const GET_ALL_PROJECTS = gql(`
   query Projects @cached(ttl: 300) {
     projects {
       project_id
-      user_namespace
       project_slug
       project_name
     }
@@ -75,7 +74,6 @@ const GET_PROJECTS_BY_IDS = gql(`
   query ProjectsByIds($project_ids: [String!]) @cached(ttl: 300) {
     projects(where: { project_id: { _in: $project_ids }}) {
       project_id
-      user_namespace
       project_slug
       project_name
     }
@@ -84,9 +82,8 @@ const GET_PROJECTS_BY_IDS = gql(`
 
 const GET_PROJECTS_BY_SLUGS = gql(`
   query ProjectsBySlugs($project_slugs: [String!]) @cached(ttl: 300) {
-    projects(where: { project_slug: { _in: $project_slugs }, user_namespace: { _eq: "oso" } }) {
+    projects(where: { project_slug: { _in: $project_slugs } }) {
       project_id
-      user_namespace
       project_slug
       project_name
     }

apps/frontend/lib/paths.ts

@@ -39,6 +39,8 @@ const pathToTypeEnum = (typePath: string) => {
   switch (typePath) {
     case "eoa":
       return "EOA_ADDRESS";
+    case "repo":
+      return "GIT_REPOSITORY";
     default:
       return null;
   }

apps/frontend/package.json

@@ -19,8 +19,8 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@apollo/client": "3.9.0-alpha.4",
-    "@apollo/experimental-nextjs-app-support": "^0.6.0",
+    "@apollo/client": "^3.9.11",
+    "@apollo/experimental-nextjs-app-support": "^0.10.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@feedbackfarm/react": "^4.0.10",
@@ -46,7 +46,7 @@
     "graphql": "^16.8.1",
     "instantsearch.css": "^8.1.0",
     "jwt-decode": "^4.0.0",
-    "next": "^14.1.0",
+    "next": "^14.2.2",
     "qs": "^6.11.2",
     "random-words": "^2.0.0",
     "react": "^18",