Feat/apollo (#1845)

* feat: Apollo server

* feat: start of an Apollo server

* Adds a hello world endpoint at /api/graphql
* Adds an Explorer sandbox at /graphql

apps/docs/package.json

@@ -27,7 +27,7 @@
     "@docusaurus/theme-common": "3.4.0",
     "@laxels/docusaurus-plugin-segment": "^1.0.6",
     "@mdx-js/react": "^3.0.1",
-    "@plasmicapp/react-web": "^0.2.343",
+    "@plasmicapp/react-web": "^0.2.346",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
@@ -37,7 +37,7 @@
     "@docusaurus/module-type-aliases": "3.4.0",
     "@docusaurus/tsconfig": "3.4.0",
     "@docusaurus/types": "3.4.0",
-    "@plasmicapp/cli": "^0.1.330",
+    "@plasmicapp/cli": "^0.1.331",
     "dotenv": "^16.4.5",
     "typescript": "~5.3.3"
   },

apps/docs/plasmic.json

@@ -124,6 +124,6 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
-  "cliVersion": "0.1.330",
-  "$schema": "https://unpkg.com/@plasmicapp/[email protected].330/dist/plasmic.schema.json"
+  "cliVersion": "0.1.331",
+  "$schema": "https://unpkg.com/@plasmicapp/[email protected].331/dist/plasmic.schema.json"
 }

apps/frontend/app/api/graphql/route.ts

@@ -0,0 +1,28 @@
+import { ApolloServer } from "@apollo/server";
+import { startServerAndCreateNextHandler } from "@as-integrations/next";
+import { NextRequest } from "next/server";
+import { gql } from "graphql-tag";
+
+const resolvers = {
+  Query: {
+    hello: () => "world",
+  },
+};
+
+const typeDefs = gql`
+  type Query {
+    hello: String
+  }
+`;
+
+const server = new ApolloServer({
+  resolvers,
+  typeDefs,
+  introspection: true,
+});
+
+const handler = startServerAndCreateNextHandler<NextRequest>(server, {
+  context: async (req) => ({ req }),
+});
+
+export { handler as GET, handler as POST };

apps/frontend/app/globals.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

apps/frontend/app/graphql/graphql.module.css

@@ -0,0 +1,7 @@
+
+.embed {      
+    display: block;  /* iframes are inline by default */   
+    height: 100vh;  /* Set height to 100% of the viewport height */   
+    width: 100vw;  /* Set width to 100% of the viewport width */     
+    border: none; /* Remove default border */
+}

apps/frontend/app/graphql/page.tsx

@@ -0,0 +1,13 @@
+import { EmbeddedSandbox } from "../../components/widgets/apollo-sandbox";
+import styles from "./graphql.module.css";
+
+export const dynamic = "force-static";
+export const revalidate = false; // 3600 = 1 hour
+
+export default function ApolloSandboxPage() {
+  return (
+    <div style={{ minHeight: "100vh" }}>
+      <EmbeddedSandbox className={styles.embed} />
+    </div>
+  );
+}

apps/frontend/components/widgets/apollo-sandbox.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { ApolloSandbox } from "@apollo/sandbox/react";
+import { DOMAIN } from "../../lib/config";
+
+const API_PROTOCOL = "https://";
+const API_BASE = API_PROTOCOL + DOMAIN;
+const API_PATH = "/api/graphql";
+const API_URL = new URL(API_PATH, API_BASE);
+
+type EmbeddedSandboxProps = {
+  className?: string;
+};
+
+function EmbeddedSandbox(props: EmbeddedSandboxProps) {
+  return (
+    <ApolloSandbox
+      className={props.className}
+      initialEndpoint={API_URL.toString()}
+    />
+  );
+}
+export { EmbeddedSandbox };

apps/frontend/next.config.js

@@ -11,6 +11,28 @@ const nextConfig = {
       }
     : {
         // Options for non-static-export
+        async headers() {
+          return [
+            {
+              // matching all API routes
+              //source: "/api/:path*",
+              source: "/api/graphql",
+              headers: [
+                { key: "Access-Control-Allow-Credentials", value: "true" },
+                { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
+                {
+                  key: "Access-Control-Allow-Methods",
+                  value: "GET,DELETE,PATCH,POST,PUT",
+                },
+                {
+                  key: "Access-Control-Allow-Headers",
+                  value:
+                    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+                },
+              ],
+            },
+          ];
+        },
         async rewrites() {
           return [
             {

apps/frontend/package.json

@@ -21,6 +21,10 @@
   "dependencies": {
     "@apollo/client": "^3.11.0",
     "@apollo/experimental-nextjs-app-support": "^0.11.2",
+    "@apollo/sandbox": "^2.6.0",
+    "@apollo/server": "^4.10.5",
+    "@as-integrations/next": "^3.0.0",
+    "@clickhouse/client": "^1.4.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@feedbackfarm/react": "^4.0.10",
@@ -45,6 +49,7 @@
     "formik-mui-x-date-pickers": "^0.0.1",
     "generate-api-key": "^1.0.2",
     "graphql": "^16.9.0",
+    "graphql-tag": "^2.12.6",
     "instantsearch.css": "^8.3.0",
     "jwt-decode": "^4.0.0",
     "next": "^14.2.5",
@@ -67,6 +72,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.3.2",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@parcel/watcher": "^2.4.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.3.1",