init

2025-10-31 16:06:03 -04:00
commit ff334a7f0d
42 changed files with 15172 additions and 0 deletions
--- a/src/app/api/graphql/route.ts
+++ b/src/app/api/graphql/route.ts
@@ -0,0 +1,26 @@
+import resolvers from "@/graphql/resolvers";
+import typeDefs from "@/graphql/types";
+import { createSchema, createYoga } from "graphql-yoga";
+
+interface NextContext {
+  params: Promise<Record<string, string>>;
+}
+
+const { handleRequest } = createYoga<NextContext>({
+  schema: createSchema({
+    typeDefs: typeDefs,
+    resolvers: resolvers
+  }),
+
+  // While using Next.js file convention for routing, we need to configure Yoga to use the correct endpoint
+  graphqlEndpoint: "/api/graphql",
+
+  // Yoga needs to know how to create a valid Next response
+  fetchAPI: { Response }
+});
+
+export {
+  handleRequest as GET,
+  handleRequest as POST,
+  handleRequest as OPTIONS
+};
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Provider } from "@/components/ui/provider";
+import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from '@urql/next';
+import { useMemo } from "react";
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+
+  const [client, ssr] = useMemo(() => {
+    const ssr = ssrExchange({
+      isClient: typeof window !== 'undefined',
+    });
+    const client = createClient({
+      url: process.env.NEXT_PUBLIC_GRAPHQL_URL || "",
+      exchanges: [cacheExchange, ssr, fetchExchange],
+      suspense: true,
+    });
+
+    return [client, ssr];
+  }, []);
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <UrqlProvider client={client} ssr={ssr}>
+          <Provider>{children}</Provider>
+        </UrqlProvider>
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
+import { Heading, Skeleton, Text } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@urql/next";
+import { Fragment } from "react/jsx-runtime";
+
+
+export default function Home() {
+  const [{ fetching, data, error }] = useQuery({ query: GetTotalGroupsQuery });
+
+  return (
+    <Fragment>
+      <Heading>{`Total number of groups the bot has helped`}</Heading>
+      <Skeleton loading={fetching} width="2rem">
+        <Text fontSize="2xl">
+          {error || !data || !data.getTotalGroups ? (
+            <Icon
+              color="yellow"
+              icon="solar:danger-triangle-broken"
+              width="24"
+              height="24"
+            />
+          ) : (
+            `${data.getTotalGroups}`
+          )}
+        </Text>
+      </Skeleton>
+    </Fragment>
+  );
+}