Agregando soporte para graphql, (apollo + code-gen) en Edge/RSC (#11)

JSConfCL · Nov 20, 2023 · 20d5d37 · 20d5d37
1 parent 9517cf8
commit 20d5d37
Show file tree

Hide file tree

Showing 33 changed files with 1,596 additions and 559 deletions.
diff --git a/.env b/.env
@@ -4,3 +4,4 @@ NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
 NEXT_PUBLIC_GRAPHQL_ENDPOINT='https://api.jsconf.dev/graphql'
 NEXT_PUBLIC_TOKEN_STORAGE_KEY='HS:token_storage_key'
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='pk_test_ZnVua3ktZ3JpZmZvbi04NC5jbGVyay5hY2NvdW50cy5kZXYk'
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# # GQL / code-generation
+# src/api/gql/**/*
+# src/**/*.generated.*
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-src/api/types.ts
+src/api/gql/**/*
+src/**/*.generated.*
diff --git a/src/app/(transition)/(root)/layout.tsx → app/(transition)/(root)/layout.tsx b/src/app/(transition)/(root)/layout.tsx → app/(transition)/(root)/layout.tsx
@@ -1,15 +1,13 @@
 import PageTransition from "@/components/PageTransition";
-import { currentUser } from "@clerk/nextjs";
 import { Nav } from "@/components/nav";
 export default async function Template({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const user = await currentUser();
   return (
     <>
-      <Nav isLogged={user !== null} />
+      <Nav />
       <PageTransition>{children}</PageTransition>
     </>
   );

diff --git a/app/(transition)/(root)/page.tsx b/app/(transition)/(root)/page.tsx
@@ -0,0 +1,32 @@
+import { getApolloClient } from "../../../src/api/ApolloClient";
+import { LandingPageEvents } from "../../../src/components/features/LandingPageEvents";
+import {
+  FetchExampleEventsDocument,
+  FetchExampleEventsQuery,
+} from "../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
+
+export default async function Home() {
+  const c = getApolloClient();
+  const variable = await c.query<FetchExampleEventsQuery>({
+    query: FetchExampleEventsDocument,
+  });
+  return (
+    <main className="flex max-w-5xl flex-col items-center justify-between px-6 pt-36 transition-all md:px-10 md:pt-44 xl:px-0 xl:pt-52">
+      <div className="flex flex-col gap-16 pb-4">
+        <h1 className="flex flex-col justify-start gap-7 text-left text-6xl font-extrabold shadow-slate-900 transition-all text-shadow sm:text-7xl xl:text-8xl">
+          <span>TICKETS</span>
+        </h1>
+      </div>
+      <div className="flex flex-col gap-4">
+        <h1>RSC</h1>
+        {variable.data?.events?.map((event) => <div>{event.id}</div>)}
+      </div>
+      <div className="flex flex-col gap-4">
+        <h1>Client fetching</h1>
+        <LandingPageEvents />
+      </div>
+    </main>
+  );
+}
+
+export const runtime = "edge";
diff --git a/src/app/(transition)/graphiql/page.tsx → app/(transition)/graphiql/page.tsx b/src/app/(transition)/graphiql/page.tsx → app/(transition)/graphiql/page.tsx
@@ -5,8 +5,8 @@ import { GraphiQL } from "graphiql";
 import { useEffect, useRef, useState } from "react";
 import "graphiql/graphiql.css";
 import Link from "next/link";
-import { urls } from "../../../lib/urls";
-import { Button } from "../../../components/ui/button";
+import { urls } from "../../../src/lib/urls";
+import { Button } from "../../../src/components/ui/button";
 
 const useGetAuthToken = () => {
   const [token, setToken] = useState<string | null>(null);

diff --git a/src/app/(transition)/layout.tsx → app/(transition)/layout.tsx b/src/app/(transition)/layout.tsx → app/(transition)/layout.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useAuth } from "@clerk/nextjs";
+import { useAuth } from "@clerk/clerk-react";
 import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
 import React, { useEffect } from "react";
 

diff --git a/src/app/globals.css → app/globals.css b/src/app/globals.css → app/globals.css
diff --git a/src/app/layout.tsx → app/layout.tsx b/src/app/layout.tsx → app/layout.tsx
@@ -1,9 +1,9 @@
-import { Nav } from "@/components/nav";
 import "./globals.css";
 import { Inter, Roboto } from "next/font/google";
 import classNames from "classnames";
-import { ClerkProvider, currentUser } from "@clerk/nextjs";
 import { ThemeProvider } from "@/components/providers";
+import { ApolloWrapper } from "../src/api/ApolloWrapper";
+import { Clerk } from "../src/components/Auth/clerk";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -29,7 +29,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ClerkProvider>
+    <Clerk>
       <html lang="es" className="h-[100dvh] overflow-hidden bg-slate-950">
         <body
           className={classNames(
@@ -38,16 +38,20 @@ export default async function RootLayout({
             "h-full overflow-hidden",
           )}
         >
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            {children}
-          </ThemeProvider>
+          <ApolloWrapper>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="system"
+              enableSystem
+              disableTransitionOnChange
+            >
+              {children}
+            </ThemeProvider>
+          </ApolloWrapper>
         </body>
       </html>
-    </ClerkProvider>
+    </Clerk>
   );
 }
+
+export const runtime = "edge";
diff --git a/codegen.ts b/codegen.ts
@@ -4,8 +4,8 @@ import defaultConfig from "./graphql.config";
 const noTypeCheckingPlugin = {
   add: {
     content: [
+      "// @ts-nocheck",
       "/* eslint-disable */",
-      "/* @ts-nocheck */",
       "/* prettier-ignore */",
       "/* This file is automatically generated. Please do not modify it manually. */",
     ],
@@ -15,17 +15,41 @@ const config = {
   ...defaultConfig,
   ignoreNoDocuments: true,
   generates: {
-    "src/api/types.ts": {
+    "src/api/gql/": {
+      preset: "client",
+      plugins: [noTypeCheckingPlugin],
+      config: {
+        useTypeImports: true,
+        skipTypename: true,
+        avoidOptionals: true,
+        nonOptionalTypename: false,
+        // Lamentablemente, code-gen establece "any" como predeterminado, cuando no tiene un
+        // tipo para un "scalar". Esta opción nos obliga a definir un tipo cada vez que
+        // queremos usar un escalar sin tipo.
+        defaultScalarType: "unknown",
+        scalars: {
+          Date: "string",
+          DateTime: "string",
+        },
+      },
+    },
+    "./src/api/gql/schema.gql": {
+      plugins: ["schema-ast"],
+    },
+    "src/": {
+      preset: "near-operation-file",
+      presetConfig: {
+        extension: ".generated.tsx",
+        baseTypesPath: "api/gql/graphql.ts",
+      },
       plugins: [
-        "typescript",
         "typescript-operations",
-        "typescript-graphql-request",
+        "typescript-react-apollo",
         noTypeCheckingPlugin,
       ],
       config: {
-        avoidOptionals: true,
-        useTypeImports: true,
-        defaultScalarType: "unknown",
+        apolloReactHooksImportFrom:
+          "@apollo/experimental-nextjs-app-support/ssr",
       },
     },
   },

diff --git a/graphql.config.ts b/graphql.config.ts
@@ -1,8 +1,8 @@
 import type { IGraphQLConfig } from "graphql-config";
 
 const config: IGraphQLConfig = {
-  schema: "https://api.jsconf.dev/graphql",
-  documents: ["src/**/*.gql"],
+  schema: "https://api.jsconf.dev/graphql", // TODO: Usar dotenv para que esta variable dependa de las variables de entorno.
+  documents: ["src/**/*.gql", "!src/api/**/*.gql"],
 };
 
 export default config;
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   poweredByHeader: false,
-  typedRoutes: true,
 };
 
 module.exports = nextConfig;