Testing apollo

beat-forge · Dec 6, 2023 · a9be435 · a9be435
1 parent 7c1db0b
commit a9be435
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -3,10 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "concurrently \"next dev\" \"pnpm watch\"",
     "prebuild": "pnpm compile",
     "build": "next build",
-    "predev": "pnpm watch",
     "start": "next start",
     "lint": "next lint",
     "compile": "env-cmd graphql-codegen",
@@ -36,6 +35,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "concurrently": "^8.2.0",
     "eslint": "^8",
     "eslint-config-next": "14.0.3",
     "postcss": "^8",

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,12 +1,7 @@
 import type { Metadata } from "next"
 import "./globals.css"
 import { GeistSans } from "geist/font/sans"
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
-
-const apolloClient = new ApolloClient({
-  uri: process.env.NEXT_PUBLIC_BEATFORGE_API_URL,
-  cache: new InMemoryCache(),
-})
+import ApolloProvider from "@beatforge/web/app/mods/ApolloProvider"
 
 export const metadata: Metadata = {
   title: "BeatForge",
@@ -19,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <ApolloProvider client={apolloClient}>
+      <ApolloProvider>
         <body className={GeistSans.className}>{children}</body>
       </ApolloProvider>
     </html>

diff --git a/apps/web/src/app/mods/ApolloProvider.tsx b/apps/web/src/app/mods/ApolloProvider.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider as _ApolloProvider,
+} from "@apollo/client"
+import { PropsWithChildren } from "react"
+
+const apolloClient = new ApolloClient({
+  uri: `${process.env.NEXT_PUBLIC_BEATFORGE_API_URL}/graphql`,
+  cache: new InMemoryCache(),
+})
+
+const ApolloProvider = (props: PropsWithChildren) => {
+  return (
+    <_ApolloProvider client={apolloClient}>{props.children}</_ApolloProvider>
+  )
+}
+
+export default ApolloProvider
diff --git a/apps/web/src/app/mods/page.tsx b/apps/web/src/app/mods/page.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { gql } from "@beatforge/web/__generated__"
+import { useQuery } from "@apollo/client"
+
+const getModsQuery = gql(/* GraphQL */ `
+  query GetMods {
+    mods {
+      name
+      id
+    }
+  }
+`)
+
+const Mods = () => {
+  const { data, error } = useQuery(getModsQuery)
+  return (
+    <main className="">
+      <h1>Mods</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </main>
+  )
+}
+
+export default Mods
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml