small change

frontend/components/create-note-dialog.tsx

@@ -1,5 +1,5 @@
 import { usePocketBase } from '@/use-pocketbase'
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
 import { type RefObject, forwardRef } from 'react'
 
@@ -9,6 +9,7 @@ export const CreateNoteDialog = forwardRef<
 		inputTitleRef: RefObject<HTMLInputElement>
 	}
 >((props, dialogRef) => {
+	const queryClient = useQueryClient()
 	const pb = usePocketBase()
 	const navigate = useNavigate()
 	const createNotes = useMutation({
@@ -17,6 +18,7 @@ export const CreateNoteDialog = forwardRef<
 		},
 		onSuccess(data) {
 			if (dialogRef && typeof dialogRef !== 'function') {
+				queryClient.invalidateQueries({ queryKey: ['notes'] })
 				dialogRef?.current?.close()
 			}
 

frontend/pocketbase-types.ts

@@ -6,6 +6,7 @@ import type PocketBase from 'pocketbase'
 import type { RecordService } from 'pocketbase'
 
 export enum Collections {
+	Notes = "notes",
 	Users = "users",
 }
 
@@ -33,27 +34,36 @@ export type AuthSystemFields<T = never> = {
 
 // Record types for each collection
 
+export type NotesRecord = {
+	content?: string
+	title?: string
+}
+
 export type UsersRecord = {
 	avatar?: string
 	name?: string
 }
 
 // Response types include system fields and match responses from the PocketBase API
+export type NotesResponse<Texpand = unknown> = Required<NotesRecord> & BaseSystemFields<Texpand>
 export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
 
 // Types containing all Records and Responses, useful for creating typing helper functions
 
 export type CollectionRecords = {
+	notes: NotesRecord
 	users: UsersRecord
 }
 
 export type CollectionResponses = {
+	notes: NotesResponse
 	users: UsersResponse
 }
 
 // Type for usage with type asserted PocketBase instance
 // https://github.com/pocketbase/js-sdk#specify-typescript-definitions
 
 export type TypedPocketBase = PocketBase & {
+	collection(idOrName: 'notes'): RecordService<NotesResponse>
 	collection(idOrName: 'users'): RecordService<UsersResponse>
 }

frontend/routes/index.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
-import { App } from '../App'
 
 const searchSchema = z.object({
 	docId: z.string().optional(),
@@ -12,7 +11,11 @@ export const Route = createFileRoute('/')({
 	},
 	component: () => (
 		<div>
-			<App />
+			<h1 className='text-3xl font-bold'>Welcome to pocket-react</h1>
+			<p className='py-6'>
+				pocket-react is a starter kit that puts together PocketBase and React
+				SPA with Vite.
+			</p>
 		</div>
 	),
 })