add pocketbase-typegen to get fully working typescript with pocketbase

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "gen-types": "sh ./scripts/gen-types-from-pb.sh"
   },
   "dependencies": {
     "@emotion/react": "^11.11.0",
@@ -40,6 +41,7 @@
     "autoprefixer": "^10.4.14",
     "eslint": "^8.40.0",
     "eslint-config-next": "13.1.2",
+    "pocketbase-typegen": "^1.1.9",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",

scripts/gen-types-from-pb.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+#
+# This script generates the types from pocketbase
+
+print_usage() {
+    echo "Usage:" 
+    echo "  --url <url-to-pocketbase>"
+    echo "  --output <output-file> (default: ./src/@types/pocketbase-types.ts)"
+    echo "  --email <email> (default: none)"
+    echo "  --password <password> (default: none)"
+}
+
+if [ $# -eq 0 ]; then
+    echo "No arguments supplied"
+    print_usage
+    exit 1
+fi
+
+if [ $# -lt 4 ]; then
+    echo "Not enough arguments supplied"
+    print_usage
+    exit 1
+fi

src/@types/pocketbase-types.ts

@@ -0,0 +1,61 @@
+/**
+* This file was @generated using pocketbase-typegen
+*/
+
+export enum Collections {
+	Pages = "pages",
+	Users = "users",
+}
+
+// Alias types for improved usability
+export type IsoDateString = string
+export type RecordIdString = string
+export type HTMLString = string
+
+// System fields
+export type BaseSystemFields<T = never> = {
+	id: RecordIdString
+	created: IsoDateString
+	updated: IsoDateString
+	collectionId: string
+	collectionName: Collections
+	expand?: T
+}
+
+export type AuthSystemFields<T = never> = {
+	email: string
+	emailVisibility: boolean
+	username: string
+	verified: boolean
+} & BaseSystemFields<T>
+
+// Record types for each collection
+
+export type PagesRecord<Tcontent = unknown> = {
+	field?: HTMLString
+	content?: null | Tcontent
+	title?: string
+	slug?: string
+}
+
+export type UsersRecord = {
+	lastname?: string
+	firstname?: string
+	avatar?: string
+}
+
+// Response types include system fields and match responses from the PocketBase API
+export type PagesResponse<Tcontent = unknown> = Required<PagesRecord<Tcontent>> & BaseSystemFields
+export type UsersResponse = Required<UsersRecord> & AuthSystemFields
+
+// Types containing all Records and Responses, useful for creating typing helper functions
+
+export type CollectionRecords = {
+	pages: PagesRecord
+	users: UsersRecord
+}
+
+export type CollectionResponses = {
+	pages: PagesResponse
+	users: UsersResponse
+}

src/pages/test-pb.tsx

@@ -1,18 +1,34 @@
 import Layout from "@/layouts/Home"
-import { api } from "@/utils/api";
+import { getPages } from "@/utils/pb"
+import { PagesRecord } from "@/@types/pocketbase-types"
 
-export default function Test() {
+export default function Test({ json }: { json: PagesRecord[]}) {
-    const json = api.example.pbPages.useQuery();
+  console.log(json)
 
   return (
     <Layout>
-      {json.data?.map((page) => (
+      {json.map((page: PagesRecord) => (
-        <div key={page?.id}>
+        <div key={page.slug}>
-          <p>{page?.id}</p>
+          <p>{page.slug}</p>
-          <h1>{page?.title}</h1>
+          <h1>{page.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: page?.field }} />
         </div>
       ))}
     </Layout>
   )
 }
+
+export async function getServerSideProps() {
+
+  const {data, error} = await getPages();
+  if (error || !data) {
+    return {
+      notFound: true,
+    }
+  }
+
+  return {
+    props: {
+      json: JSON.parse(JSON.stringify(data)),
+    },
+  }
+}

src/server/api/routers/example.ts

@@ -1,11 +1,6 @@
 import { z } from "zod";
-import { env } from "@/env/server.mjs";
-
 import { createTRPCRouter, publicProcedure } from "../trpc";
 
-import  PocketBase from "pocketbase";
-const pb = new PocketBase(env.PB_API);
-
 export const exampleRouter = createTRPCRouter({
   hello: publicProcedure
     .input(z.object({ text: z.string() }))
@@ -14,8 +9,4 @@ export const exampleRouter = createTRPCRouter({
         greeting: `Hello ${input.text}`,
       };
     }),
-  pbPages: publicProcedure
-    .query(async () => {
-      return await pb.collection("pages").getFullList();
-    }),
 });

src/utils/pb.ts

@@ -0,0 +1,17 @@
+import PocketBase from "pocketbase";
+import { env } from "@/env/server.mjs";
+import { PagesRecord } from "@/@types/pocketbase-types";
+
+const pb = new PocketBase(env.PB_API);
+
+async function getPages() {
+  try {
+    const data: PagesRecord[] = await pb.collection("pages").getFullList();
+    return { data };
+  } catch (error) {
+    console.log(error);
+    return { error };
+  }
+}
+
+export { pb, getPages };