Add Solid-Relay Basic Config

.github/workflows/main.yaml

@@ -6,6 +6,9 @@ on:
     branches: ["**"]
     tags: ["*.*.*"]
 
+env:
+  AUBE_ALLOWED_UNPOPULAR_PACKAGES: pglite-cli
+
 jobs:
   check:
     runs-on: ubuntu-latest

.gitignore

@@ -1,5 +1,10 @@
 .DS_Store
+*.graphql
+*.graphql.ts
 
 .pgdata/
+
 node_modules/
 packages/*/dist/
+
+index.db

.oxfmtrc.json

@@ -8,6 +8,7 @@
     "**/dist/*.{cjs,d.cts,d.mts,d.ts,js,mjs}",
     ".agents/skills/",
     ".claude/skills/",
-    "plans/"
+    "plans/",
+    "**/__generated__/**"
   ]
 }

.oxlintrc.json

@@ -23,6 +23,8 @@
       "always",
       { "ignoreConsecutiveComments": true }
     ],
+    "node/no-top-level-await": "off",
+    "oxc/no-optional-chaining": "off",
     "eslint/eqeqeq": ["off", "smart"],
     "eslint/func-style": ["off"],
     "eslint/id-length": ["warn", { "exceptionPatterns": ["^_", "^[Tertv]$"] }],

mise.toml

@@ -2,12 +2,12 @@ min_version = "2026.6.10"
 
 [tools]
 "aqua:dahlia/hongdown" = "0.4.3"
-"github:nushell/nushell" = "latest"
+"github:nushell/nushell" = "0.114.1"
 node = "26"
 "npm:@typescript/native-preview" = "7.0.0-dev.20260620.1"
-"npm:oxlint" = "latest"
-"npm:oxlint-tsgolint" = "latest"
-"npm:pglite-cli" = "latest"
+"npm:oxlint" = "1.75.0"
+"npm:oxlint-tsgolint" = "7.0.2001"
+"npm:pglite-cli" = "0.0.1"
 oxfmt = "0.55.0"
 pnpm = "11"
 
@@ -154,7 +154,11 @@ run = "node scripts/dev.mts"
 raw_args = true
 description = "Run SolidStart frontend server"
 dir = "./packages/web"
-run = "pnpm run dev"
+run = """
+#!/usr/bin/env nu
+mise run generate:graphql-schema --output-file ./packages/web/schema.graphql
+pnpm run dev
+"""
 
 [tasks."drfed-server"]
 description = "Invoke drfed-server command"

packages/web/.oxlintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["../../.oxlintrc.json"],
+  "ignorePatterns": ["**/__generated__/**"],
   "jsPlugins": ["eslint-plugin-solid"],
   "env": {
     "browser": true,

packages/web/package.json

@@ -50,10 +50,16 @@
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "2.0.0-alpha.2",
     "@solidjs/vite-plugin-nitro-2": "^0.1.0",
+    "relay-runtime": "^21.0.1",
     "solid-js": "^1.9.5",
+    "solid-relay": "1.0.0-beta.27",
     "vite": "^7.0.0"
   },
   "devDependencies": {
-    "eslint-plugin-solid": "^0.14.5"
+    "@types/relay-runtime": "^20.1.1",
+    "eslint-plugin-solid": "^0.14.5",
+    "relay-compiler": "^21.0.1",
+    "vite-plugin-cjs-interop": "^4.0.3",
+    "vite-plugin-relay-lite": "^0.12.0"
   }
 }

packages/web/relay.config.json

@@ -0,0 +1,6 @@
+{
+  "src": "./src",
+  "schema": "./schema.graphql",
+  "language": "typescript",
+  "eagerEsModules": true
+}

packages/web/src/RelayEnviroment.ts

@@ -0,0 +1,47 @@
+// DrFed: A web-based platform for developing and debugging ActivityPub apps
+// Copyright (C) 2026 DrFed team
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  Environment,
+  type FetchFunction,
+  Network,
+  RecordSource,
+  Store,
+} from "relay-runtime";
+
+// oxlint-disable no-async-await
+const fetchFn: FetchFunction = async (params, variables) => {
+  const response = await fetch("http://0.0.0.0:8888/graphql", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: params.text,
+      variables,
+    }),
+  });
+
+  // oxlint-disable return-await no-unsafe-return
+  return await response.json();
+};
+
+export function createRelayEnvironment() {
+  return new Environment({
+    network: Network.create(fetchFn),
+    store: new Store(new RecordSource()),
+  });
+}

packages/web/src/app.tsx

@@ -20,20 +20,27 @@ import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 
 import "./app.css";
+import { RelayEnvironmentProvider } from "solid-relay";
+
+import { createRelayEnvironment } from "./RelayEnviroment";
 
 export default function App() {
+  const environment = createRelayEnvironment();
+
   return (
-    <Router
-      root={(props) => (
-        <MetaProvider>
-          <Title>SolidStart - Basic</Title>
-          <a href="/">Index</a>
-          <a href="/about">About</a>
-          <Suspense>{props.children}</Suspense>
-        </MetaProvider>
-      )}
-    >
-      <FileRoutes />
-    </Router>
+    <RelayEnvironmentProvider environment={environment}>
+      <Router
+        root={(props) => (
+          <MetaProvider>
+            <Title>SolidStart - Basic</Title>
+            <a href="/">Index</a>
+            <a href="/about">About</a>
+            <Suspense>{props.children}</Suspense>
+          </MetaProvider>
+        )}
+      >
+        <FileRoutes />
+      </Router>
+    </RelayEnvironmentProvider>
   );
 }

packages/web/src/routes/index.tsx

@@ -15,15 +15,37 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { Title } from "@solidjs/meta";
+import { graphql } from "relay-runtime";
+import { Show } from "solid-js";
+import { createLazyLoadQuery } from "solid-relay";
 
-import Counter from "~/components/Counter";
+import type { HomeViewerQuery } from "./__generated__/HomeViewerQuery.graphql";
+
+const homeViewerQuery = graphql`
+  query HomeViewerQuery {
+    viewer {
+      name
+      admin
+    }
+  }
+`;
 
 export default function Home() {
+  const query = createLazyLoadQuery<HomeViewerQuery>(homeViewerQuery, {});
+
   return (
     <main>
       <Title>Hello World</Title>
       <h1>Hello world!</h1>
-      <Counter />
+      <Show when={query()?.viewer} fallback={<p>로그인되지 않았습니다.</p>}>
+        {(viewer) => (
+          <p>
+            {viewer().name}
+            {viewer().admin ? " (관리자)" : ""}
+          </p>
+        )}
+      </Show>
+
       <p>
         Visit{" "}
         <a href="https://start.solidjs.com" target="_blank">

packages/web/vite.config.ts

@@ -17,7 +17,14 @@
 import { solidStart } from "@solidjs/start/config";
 import { nitroV2Plugin as nitro } from "@solidjs/vite-plugin-nitro-2";
 import { defineConfig } from "vite";
+import { cjsInterop } from "vite-plugin-cjs-interop";
+import relay from "vite-plugin-relay-lite";
 
-export default defineConfig({
-  plugins: [solidStart(), nitro()],
-});
+export default defineConfig(({ command }) => ({
+  plugins: [
+    solidStart(),
+    nitro(),
+    relay({ codegen: command !== "build" }),
+    cjsInterop({ dependencies: ["relay-runtime"] }),
+  ],
+}));