Using apollo with RSC support to fetch mods in a table

apps/web/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
+    "@apollo/experimental-nextjs-app-support": "^0.5.2",
     "@tanstack/react-table": "^8.10.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

apps/web/src/apollo/ApolloClient.ts

@@ -0,0 +1,8 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client"
+
+const apolloClient = new ApolloClient({
+  uri: `${process.env.NEXT_PUBLIC_BEATFORGE_API_URL}/graphql`,
+  cache: new InMemoryCache(),
+})
+
+export default apolloClient

apps/web/src/apollo/ApolloProvider.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { ApolloProvider as _ApolloProvider } from "@apollo/client"
+import { PropsWithChildren } from "react"
+import apolloClient from "@beatforge/web/apollo/ApolloClient"
+
+const ApolloProvider = (props: PropsWithChildren) => {
+  return (
+    <_ApolloProvider client={apolloClient}>{props.children}</_ApolloProvider>
+  )
+}
+
+export default ApolloProvider

apps/web/src/apollo/getApolloRSCClient.ts

@@ -0,0 +1,8 @@
+import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc"
+import apolloClient from "@beatforge/web/apollo/ApolloClient"
+
+const { getClient: getApolloRSCClient } = registerApolloClient(
+  () => apolloClient,
+)
+
+export default getApolloRSCClient

apps/web/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import "./globals.css"
 import { GeistSans } from "geist/font/sans"
-import ApolloProvider from "@beatforge/web/app/mods/ApolloProvider"
+import ApolloProvider from "@beatforge/web/apollo/ApolloProvider"
 
 export const metadata: Metadata = {
   title: "BeatForge",

apps/web/src/app/mods/ModsTable.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { GetModsQuery } from "@beatforge/web/__generated__/graphql"
+import { ColumnDef } from "@tanstack/react-table"
+import DataTable from "@beatforge/web/components/DataTable"
+
+interface Props {
+  mods: GetModsQuery["mods"]
+}
+
+interface Mod {
+  name: string
+  version: string
+  author: string
+}
+
+const columns: ColumnDef<Mod>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+  },
+  {
+    accessorKey: "version",
+    header: "Version",
+  },
+  {
+    accessorKey: "author",
+    header: "Author",
+  },
+]
+
+const ModsTable = ({ mods }: Props) => {
+  const mappedMods = mods.map((mod) => ({
+    name: mod.name,
+    version: mod.versions[0].version,
+    author: mod.author.displayName ?? mod.author.username,
+  }))
+
+  return <DataTable columns={columns} data={mappedMods} />
+}
+
+export default ModsTable

apps/web/src/app/mods/page.tsx

@@ -1,25 +1,28 @@
-"use client"
-
 import { gql } from "@beatforge/web/__generated__"
-import { useQuery } from "@apollo/client"
+import ModsTable from "@beatforge/web/app/mods/ModsTable"
+import getApolloRSCClient from "@beatforge/web/apollo/getApolloRSCClient"
 
 const getModsQuery = gql(/* GraphQL */ `
   query GetMods {
     mods {
       name
-      id
+      versions {
+        version
+      }
+      author {
+        username
+        displayName
+      }
     }
   }
 `)
 
-const Mods = () => {
-  const { data, error } = useQuery(getModsQuery)
-  return (
-    <main className="">
-      <h1>Mods</h1>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-    </main>
-  )
+const Mods = async () => {
+  const mods = await getApolloRSCClient().query({
+    query: getModsQuery,
+  })
+
+  return <ModsTable mods={mods.data.mods} />
 }
 
 export default Mods

apps/web/src/components/DataTable.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@beatforge/web/components/ui/table"
+
+interface Props<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+function DataTable<TData, TValue>({ columns, data }: Props<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export default DataTable