refactor: graphql

package.json

@@ -51,10 +51,9 @@
   "dependencies": {
     "@octokit/auth-app": "^6.0.3",
     "@octokit/core": "^5.1.0",
-    "@solid-primitives/graphql": "^2.0.2",
     "@solidjs/meta": "^0.29.3",
-    "@solidjs/router": "^0.11.5",
-    "@solidjs/start": "^0.5.4",
+    "@solidjs/router": "^0.12.0",
+    "@solidjs/start": "^0.5.5",
     "@tailwindcss/typography": "^0.5.10",
     "@zentered/issue-forms-body-parser": "^2.2.0",
     "clsx": "^2.1.0",
@@ -64,11 +63,11 @@
     "solid-markdown": "^2.0.0",
     "solid-start-cloudflare-pages": "^0.3.10",
     "undici": "^6.6.2",
-    "vinxi": "^0.2.1",
+    "vinxi": "^0.3.0",
     "vite-plugin-solid-svg": "^0.8.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/config-conventional": "^18.6.1",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/typed-document-node": "^5.0.4",
     "@graphql-codegen/typescript": "^4.0.4",
@@ -86,7 +85,7 @@
     "tailwindcss": "^3.4.1",
     "vite": "^5.1.1",
     "vite-plugin-solid": "^2.9.1",
-    "wrangler": "^3.28.0"
+    "wrangler": "^3.28.1"
   },
   "engines": {
     "node": ">=18"

src/app.jsx

@@ -7,8 +7,7 @@ import { FileRoutes } from '@solidjs/start'
 import { Header } from './components/Header'
 import { Footer } from './components/Footer'
 import announcementQuery from '~/graphql/announcement.query.js'
-import graphql from '~/lib/graphql.server.js'
-import { createMemo } from 'solid-js'
+import graphql from '~/server/graphql.js'
 
 import './app.css'
 
@@ -72,17 +71,17 @@ function Announcement(props) {
 }
 
 export default function App() {
-  const [data] = graphql(announcementQuery.gql, announcementQuery.vars)
+  // const [data] = graphql(announcementQuery.gql, announcementQuery.vars)
 
   return (
     <Router
       root={(props) => (
         <MetaProvider>
           <div class="h-full bg-zinc-50 dark:bg-black">
             <Title>Cyprus Developer Community - Home</Title>
-            <Show when={data()?.repository?.discussions.nodes[0].body}>
+            {/* <Show when={data()?.repository?.discussions.nodes[0].body}>
               <Announcement data={data()} />
-            </Show>
+            </Show> */}
             <Header />
             <Suspense>{props.children}</Suspense>
             <Footer />

src/components/Speaker.jsx

@@ -1,5 +1,5 @@
 import speakerQuery from '~/graphql/speaker.query'
-import graphql from '~/lib/graphql.server'
+import graphql from '~/server/graphql'
 import { Show } from 'solid-js'
 import { GitHubIcon } from './SocialIcons'
 

src/graphql/announcement.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/file.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: function (p) {

src/graphql/issue.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/organization.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/past-events.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/speaker.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/talks.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/upcoming-events.query.js

@@ -1,4 +1,4 @@
-import { gql } from '@solid-primitives/graphql'
+import { gql } from './utils.js'
 
 export default {
   gql: gql`

src/graphql/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Creates a GraphQL query string.
+ */
+export const gql = (query, ...expressions) =>
+  query
+    .map((s, i) => `${s}${expressions[i] ?? ''}`)
+    .join('')
+    .replace(/#.+\r?\n|\r/g, '')
+    .replace(/\r?\n|\r/g, '')
+    .replace(/\s{2,}/g, ' ')
+    .trim()

src/routes/index.jsx

@@ -1,17 +1,9 @@
-import {
-  For,
-  createResource,
-  splitProps,
-  Show,
-  Switch,
-  Match,
-  createMemo
-} from 'solid-js'
+import { For, splitProps, Show, Switch, Match, createMemo } from 'solid-js'
+import { A, createAsync, cache } from '@solidjs/router'
 import clsx from 'clsx'
 import { Container } from '~/components/Container'
 import { GitHubIcon, LinkedInIcon, DiscordIcon } from '~/components/SocialIcons'
-import { A } from '@solidjs/router'
-import graphql from '~/lib/graphql.server.js'
+import graphql from '~/server/graphql.js'
 import fileQuery from '~/graphql/file.query.js'
 import organizationQuery from '~/graphql/organization.query.js'
 import issuesQuery from '~/graphql/upcoming-events.query.js'
@@ -25,7 +17,7 @@ function Photos() {
     <div class="mt-16 sm:mt-20">
       <div class="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
         <For each={new Array(5)}>
-          {(image, imageIndex) => (
+          {(_, imageIndex) => (
             <div
               class={clsx(
                 'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
@@ -57,24 +49,23 @@ function SocialLink(props) {
 }
 
 function EventBox(props) {
-  const [issueData] = createResource(async () => {
-    const data = await bodyParser(props.event.body)
-    return data
-  })
+  const [local] = splitProps(props, ['event'])
+  const event = local.event
+  const issueData = event.parsed
 
   return (
     <article class="flex flex-col items-start justify-between">
-      <A href={`/events/${props.event.number}`}>
+      <A href={`/events/${event.number}`}>
         <div class="relative w-full">
           <Switch>
-            <Match when={issueData()?.['featured-image']?.images?.[0]}>
+            <Match when={issueData['featured-image']?.images?.[0]}>
               <img
-                src={issueData()?.['featured-image']?.images?.[0]?.src}
-                alt={issueData()?.['featured-image']?.images?.[0]?.alt}
+                src={issueData['featured-image']?.images?.[0]?.src}
+                alt={issueData['featured-image']?.images?.[0]?.alt}
                 class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
               />
             </Match>
-            <Match when={!issueData()?.['featured-image']?.images?.[0]}>
+            <Match when={!issueData['featured-image']?.images?.[0]}>
               <img
                 src="/assets/cdc-logo.svg"
                 alt="Cyprus Developer Community Logo"
@@ -87,33 +78,33 @@ function EventBox(props) {
       </A>
       <div class="max-w-xl">
         <div class="mt-8 flex items-center gap-x-4 text-xs">
-          <time dateTime={issueData()?.date.date} class="text-gray-500">
-            {issueData()?.date.date}
+          <time dateTime={issueData.date.date} class="text-gray-500">
+            {issueData.date.date}
           </time>
         </div>
         <div class="group relative">
           <H3>
-            <a href={props.event.href}>
+            <a href={event.href}>
               <span class="absolute inset-0" />
-              <A href={`/events/${props.event.number}`}>{props.event.title}</A>
+              <A href={`/events/${event.number}`}>{event.title}</A>
             </a>
           </H3>
         </div>
         {/* <div class="relative mt-8 flex items-center gap-x-4">
-        <img
-          src={props.event.author.imageUrl}
-          alt=""
-          class="h-10 w-10 rounded-full bg-gray-100"
-        />
-        <div class="text-sm leading-6">
-          <p class="font-semibold text-gray-900">
-            <a href={props.event.author.href}>
-              <span class="absolute inset-0" />
-              {props.event.author.name}
-            </a>
-          </p>
-        </div>
-      </div> */}
+          <img
+            src={props.event.author.imageUrl}
+            alt=""
+            class="h-10 w-10 rounded-full bg-gray-100"
+          />
+          <div class="text-sm leading-6">
+            <p class="font-semibold text-gray-900">
+              <a href={props.event.author.href}>
+                <span class="absolute inset-0" />
+                {props.event.author.name}
+              </a>
+            </p>
+          </div>
+        </div> */}
       </div>
     </article>
   )
@@ -174,30 +165,48 @@ function Stats(props) {
   )
 }
 
-export default function App() {
-  const [readmeFile] = graphql(fileQuery.gql(), {
+const readmeData = cache(async () => {
+  'use server'
+  const readmeFile = await graphql(fileQuery.gql(), {
     repository: 'home',
     path: 'README.md',
     ...fileQuery.vars
   })
-  const [organization] = graphql(organizationQuery.gql, organizationQuery.vars)
-  const [readmeData] = createResource(readmeFile, async () => {
-    const data = await bodyParser(readmeFile()?.repository.object.text)
-    return data
-  })
-  const [events] = graphql(issuesQuery.gql, {
+  return bodyParser(readmeFile.repository.object.text)
+}, 'readmeData')
+
+const organizationData = cache(async () => {
+  return graphql(organizationQuery.gql, organizationQuery.vars)
+}, 'organizationData')
+
+const eventsData = cache(async () => {
+  const events = await graphql(issuesQuery.gql, {
     repository: 'events',
     ...issuesQuery.vars
   })
+  for (const event of events.repository.issues.nodes) {
+    event.parsed = await bodyParser(event.body)
+  }
+  return events
+}, 'eventsData')
+
+export const route = {
+  load: () => [eventsData(), readmeData(), organizationData()]
+}
+
+export default function App() {
+  const events = createAsync(eventsData)
+  const readme = createAsync(readmeData)
+  const organization = createAsync(organizationData)
 
   return (
     <>
       <Container class="mt-9">
         <div class="max-w-2xl">
           <H1>{organization()?.organization.name}</H1>
-          <Show when={readmeData}>
+          <Show when={readme}>
             <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
-              {readmeData()?.about?.content}
+              {readme()?.about?.content}
             </p>
           </Show>
           <div class="mt-6 flex gap-6">
@@ -225,7 +234,7 @@ export default function App() {
         <H2>Upcoming Events</H2>
         <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
           <For each={events()?.repository?.issues.nodes}>
-            {(event) => <EventBox event={event} />}
+            {(node) => <EventBox event={node} />}
           </For>
         </div>
       </Container>

src/server/graphql.js

@@ -0,0 +1,9 @@
+import { ghClient } from './octokit.js'
+
+export default async function graphQLFetch(query, variables) {
+  'use server'
+
+  const octokit = ghClient()
+
+  return octokit.graphql(query, variables)
+}

src/server/octokit.js

@@ -0,0 +1,23 @@
+import { Octokit } from '@octokit/core'
+import { createAppAuth } from '@octokit/auth-app'
+
+export function ghClient() {
+  'use server'
+
+  if (process.env.GH_PAT) {
+    // with personal access token (local development)
+    return new Octokit({ auth: process.env.GH_PAT })
+  } else {
+    // with GitHub App (production)
+    const appOctokit = new Octokit({
+      authStrategy: createAppAuth,
+      auth: {
+        appId: process.env.GH_APP_ID,
+        privateKey: atob(process.env.GH_PRIVATE_KEY),
+        installationId: process.env.GH_APP_INSTALLATION_ID
+      }
+    })
+
+    return appOctokit
+  }
+}