refactor: use planetscale instead of custom api

2026-03-09 16:13:31 +01:00 · 2023-11-07 15:08:03 +01:00
parent 344a3f9344
commit 009c0a3bae
10 changed files with 131 additions and 69 deletions
--- a/apps/guide/src/util/fetcher.ts
+++ b/apps/guide/src/util/fetcher.ts
@@ -1,4 +0,0 @@
-export const fetcher = async (url: string) => {
-	const res = await fetch(url);
-	return res.json();
-};
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -72,8 +72,7 @@
 		"react-use": "^17.4.0",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.6",
-		"swr": "^2.2.4"
+		"sharp": "^0.32.6"
 	},
 	"devDependencies": {
 		"@next/bundle-analyzer": "^14.0.1",
--- a/apps/website/src/app/docAPI.ts
+++ b/apps/website/src/app/docAPI.ts
@@ -15,11 +15,12 @@ export async function fetchVersions(packageName: string): Promise<string[]> {
 		return ['main'];
 	}

-	const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
-		next: { revalidate: 3_600 },
-	});
+	const { rows } = await sql.execute('select version from documentation where name = ? order by version desc', [
+		packageName,
+	]);

-	return response.json();
+	// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+	return rows[0].data;
 }

 export async function fetchModelJSON(packageName: string, version: string): Promise<unknown> {
--- a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
@@ -68,6 +68,8 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 		return (member as ApiFunction).overloadIndex === 1;
 	});

+	const versions = await fetchVersions(params.package);
+
 	return (
 		<Providers>
 			<Banner className="mb-6" />
@@ -75,7 +77,7 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 				<Header />
 				<div className="relative top-2.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
 					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_145px)]">
-						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
+						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} versions={versions} />
 					</div>

 					<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
--- a/apps/website/src/app/docs/packages/[package]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/page.tsx
@@ -3,6 +3,7 @@ import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
 import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
+import { fetchVersions } from '~/app/docAPI';
 import { buttonVariants } from '~/styles/Button';
 import { PACKAGES } from '~/util/constants';

@@ -11,18 +12,13 @@ async function getData(pkg: string) {
 		notFound();
 	}

-	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-		return ['main'];
-	}
-
-	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
-	const data: string[] = await res.json();
+	const data = await fetchVersions(pkg);

 	if (!data.length) {
 		throw new Error('Failed to fetch data');
 	}

-	return data.reverse();
+	return data;
 }

 export default async function Page({ params }: { params: { package: string } }) {
--- a/apps/website/src/components/Nav.tsx
+++ b/apps/website/src/components/Nav.tsx
@@ -9,7 +9,13 @@ import type { SidebarSectionItemData } from './Sidebar';
 const PackageSelect = dynamic(async () => import('./PackageSelect'));
 const VersionSelect = dynamic(async () => import('./VersionSelect'));

-export function Nav({ members }: { readonly members: SidebarSectionItemData[] }) {
+export function Nav({
+	members,
+	versions,
+}: {
+	readonly members: SidebarSectionItemData[];
+	readonly versions: string[];
+}) {
 	const { opened } = useNav();

 	return (
@@ -30,7 +36,7 @@ export function Nav({ members }: { readonly members: SidebarSectionItemData[] })
 			>
 				<div className="flex flex-col gap-4 p-3">
 					<PackageSelect />
-					<VersionSelect />
+					<VersionSelect versions={versions} />
 				</div>
 				<Sidebar members={members} />
 			</Scrollbars>
--- a/apps/website/src/components/VersionSelect.tsx
+++ b/apps/website/src/components/VersionSelect.tsx
@@ -6,34 +6,29 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
-import useSWR from 'swr';
-import { fetcher } from '~/util/fetcher';

 const isDev = process.env.NEXT_PUBLIC_LOCAL_DEV ?? process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview';

-export default function VersionSelect() {
+export default function VersionSelect({ versions }: { readonly versions: string[] }) {
 	const pathname = usePathname();
 	const packageName = pathname?.split('/').slice(3, 4)[0];
 	const branchName = pathname?.split('/').slice(4, 5)[0];

-	const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
 	const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });

 	const versionMenuItems = useMemo(
 		() =>
-			versions
-				?.map((item, idx) => (
-					<Link href={`/docs/packages/${packageName}/${isDev ? 'main' : item}`} key={`${item}-${idx}`}>
-						<MenuItem
-							className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
-							onClick={() => versionMenu.setOpen(false)}
-							state={versionMenu}
-						>
-							{item}
-						</MenuItem>
-					</Link>
-				))
-				.reverse() ?? [],
+			versions?.map((item, idx) => (
+				<Link href={`/docs/packages/${packageName}/${isDev ? 'main' : item}`} key={`${item}-${idx}`}>
+					<MenuItem
+						className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+						onClick={() => versionMenu.setOpen(false)}
+						state={versionMenu}
+					>
+						{item}
+					</MenuItem>
+				</Link>
+			)) ?? [],
 		[versions, packageName, versionMenu],
 	);

--- a/apps/website/src/middleware.ts
+++ b/apps/website/src/middleware.ts
@@ -1,16 +1,27 @@
+import { connect } from '@planetscale/database';
 import { get } from '@vercel/edge-config';
 import { NextResponse, type NextRequest } from 'next/server';
 import { PACKAGES } from './util/constants';

+const sql = connect({
+	url: process.env.DATABASE_URL!,
+	async fetch(url, init) {
+		delete init?.cache;
+		return fetch(url, { ...init, next: { revalidate: 3_600 } });
+	},
+});
+
 async function fetchLatestVersion(packageName: string) {
 	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
 		return 'main';
 	}

-	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, { cache: 'no-store' });
-	const data: string[] = await res.json();
+	const { rows } = await sql.execute('select version from documentation where name = ? order by version desc', [
+		packageName,
+	]);

-	return data.at(-2);
+	// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+	return rows[0].data.at(1);
 }

 export default async function middleware(request: NextRequest) {
--- a/apps/website/src/util/fetcher.ts
+++ b/apps/website/src/util/fetcher.ts
@@ -1,4 +0,0 @@
-export const fetcher = async (url: string) => {
-	const res = await fetch(url, { next: { revalidate: 3_600 } });
-	return res.json();
-};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -307,9 +307,6 @@ importers:
      sharp:
        specifier: ^0.32.6
        version: 0.32.6
-      swr:
-        specifier: ^2.2.4
-        version: 2.2.4(react@18.2.0)
    devDependencies:
      '@next/bundle-analyzer':
        specifier: ^14.0.1
@@ -319,7 +316,7 @@ importers:
        version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
      '@testing-library/user-event':
        specifier: ^14.5.1
-        version: 14.5.1(@testing-library/dom@9.3.3)
+        version: 14.5.1
      '@types/node':
        specifier: 18.18.8
        version: 18.18.8
@@ -340,7 +337,7 @@ importers:
        version: 0.57.2
      '@vitejs/plugin-react':
        specifier: ^4.1.1
-        version: 4.1.1(vite@4.5.0)
+        version: 4.1.1
      '@vitest/coverage-v8':
        specifier: ^0.34.6
        version: 0.34.6(vitest@0.34.6)
@@ -6811,6 +6808,13 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: true

+  /@testing-library/user-event@14.5.1:
+    resolution: {integrity: sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+    dev: true
+
  /@testing-library/user-event@14.5.1(@testing-library/dom@9.3.3):
    resolution: {integrity: sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==}
    engines: {node: '>=12', npm: '>=6'}
@@ -8037,6 +8041,21 @@ packages:
      - supports-color
    dev: true

+  /@vitejs/plugin-react@4.1.1:
+    resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.23.2)
+      '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
+      '@types/babel__core': 7.20.3
+      react-refresh: 0.14.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /@vitejs/plugin-react@4.1.1(vite@4.5.0):
    resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -9750,6 +9769,7 @@ packages:
  /commander@9.5.0:
    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
    engines: {node: ^12.20.0 || >=14}
+    requiresBuild: true

  /comment-json@4.2.3:
    resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
@@ -19590,16 +19610,6 @@ packages:
      upper-case: 1.1.3
    dev: true

-  /swr@2.2.4(react@18.2.0):
-    resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
-    dev: false
-
  /synchronous-promise@2.0.17:
    resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
    dev: true
@@ -20892,14 +20902,6 @@ packages:
      react: 18.2.0
      tslib: 2.6.2

-  /use-sync-external-store@1.2.0(react@18.2.0):
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}

@@ -21080,6 +21082,28 @@ packages:
      unist-util-stringify-position: 3.0.3
      vfile-message: 3.1.4

+  /vite-node@0.34.6(@types/node@18.18.8):
+    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      mlly: 1.4.2
+      pathe: 1.1.1
+      picocolors: 1.0.0
+      vite: 4.5.0(@types/node@18.18.8)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
  /vite-node@0.34.6(@types/node@18.18.8)(terser@5.24.0):
    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
    engines: {node: '>=v14.18.0'}
@@ -21162,6 +21186,42 @@ packages:
      fsevents: 2.3.3
    dev: true

+  /vite@4.5.0(@types/node@18.18.8):
+    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.18.8
+      esbuild: 0.18.20
+      postcss: 8.4.31
+      rollup: 3.29.4
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
  /vite@4.5.0(@types/node@18.18.8)(terser@5.24.0):
    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -21252,8 +21312,8 @@ packages:
      strip-literal: 1.3.0
      tinybench: 2.5.1
      tinypool: 0.7.0
-      vite: 4.5.0(@types/node@18.18.8)(terser@5.24.0)
-      vite-node: 0.34.6(@types/node@18.18.8)(terser@5.24.0)
+      vite: 4.5.0(@types/node@18.18.8)
+      vite-node: 0.34.6(@types/node@18.18.8)
      why-is-node-running: 2.2.2
    transitivePeerDependencies:
      - less