Vue 3 + PocketBase 完整集成教程

src/
├── api/              # API 模块
│   ├── index.ts      # PocketBase 实例
│   ├── auth.ts       # 认证相关 API
│   └── posts.ts      # 业务 API 示例
├── stores/           # Pinia stores
│   ├── auth.ts       # 认证状态
│   └── posts.ts      # 业务状态
├── composables/      # Composables
│   ├── useAuth.ts    # 认证逻辑
│   └── usePosts.ts   # 业务逻辑
├── router/           # 路由配置
│   └── index.ts
├── views/            # 页面组件
│   ├── Home.vue
│   ├── Login.vue
│   ├── Register.vue
│   └── Dashboard.vue
├── components/       # 通用组件
├── types/            # TypeScript 类型
│   └── pocketbase.ts
└── main.ts

VITE_PB_URL=http://localhost:8090
VITE_PB_URL_PROD=https://api.yourserver.com

VITE_PB_URL=https://api.yourserver.com

import PocketBase from "pocketbase";

const pbUrl = import.meta.env.VITE_PB_URL || "http://localhost:8090";

export const pb = new PocketBase(pbUrl);

// 开发环境下启用日志
if (import.meta.env.DEV) {
  pb.autoCancellation(false);
}

export default pb;

import type { ListResult, RecordModel } from "pocketbase";

// 扩展用户模型
export interface UserResponse extends RecordModel {
  id: string;
  collectionId: string;
  collectionName: string;
  username: string;
  email: string;
  name: string;
  avatar?: string;
  role: "user" | "admin";
  created: string;
  updated: string;
}

// 文章模型
export interface PostResponse extends RecordModel {
  id: string;
  collectionId: string;
  collectionName: string;
  title: string;
  content: string;
  excerpt: string;
  status: "draft" | "published";
  category: string;
  tags: string[];
  author: string; // 关联用户 ID
  authorData?: UserResponse;
  views: number;
  created: string;
  updated: string;
}

// 认证响应
export interface AuthResponse {
  token: string;
  record: UserResponse;
}

// 分页参数
export interface ListParams {
  page?: number;
  perPage?: number;
  filter?: string;
  sort?: string;
  expand?: string;
}

// 扩展列表结果
export interface PaginatedList<T> extends ListResult<T> {
  items: T[];
}

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

import { pb } from "./index";
import type { AuthResponse, UserResponse } from "@/types/pocketbase";

export interface LoginCredentials {
  email: string;
  password: string;
}

export interface RegisterData {
  email: string;
  password: string;
  passwordConfirm: string;
  name: string;
}

export interface UpdateProfileData {
  name?: string;
  avatar?: File;
}

// 登录
export async function login(
  credentials: LoginCredentials,
): Promise<AuthResponse> {
  return await pb
    .collection("users")
    .authWithPassword(credentials.email, credentials.password);
}

// 注册
export async function register(data: RegisterData): Promise<UserResponse> {
  return await pb.collection("users").create(data);
}

// 登出
export function logout(): void {
  pb.authStore.clear();
}

// 获取当前用户
export function getCurrentUser(): UserResponse | null {
  return pb.authStore.model as UserResponse | null;
}

// 检查是否已登录
export function isAuthenticated(): boolean {
  return pb.authStore.isValid;
}

// 更新用户资料
export async function updateProfile(
  data: UpdateProfileData,
): Promise<UserResponse> {
  const userId = pb.authStore.model?.id;
  if (!userId) throw new Error("未登录");

  const formData = new FormData();
  if (data.name) formData.append("name", data.name);
  if (data.avatar) formData.append("avatar", data.avatar);

  return await pb.collection("users").update(userId, formData);
}

// 修改密码
export async function changePassword(
  oldPassword: string,
  password: string,
  passwordConfirm: string,
): Promise<void> {
  const userId = pb.authStore.model?.id;
  if (!userId) throw new Error("未登录");

  await pb.collection("users").update(userId, {
    oldPassword,
    password,
    passwordConfirm,
  });
}

// 发送密码重置邮件
export async function requestPasswordReset(email: string): Promise<void> {
  await pb.collection("users").requestPasswordReset(email);
}

// 确认密码重置
export async function confirmPasswordReset(
  token: string,
  password: string,
  passwordConfirm: string,
): Promise<void> {
  await pb
    .collection("users")
    .confirmPasswordReset(token, password, passwordConfirm);
}

// OAuth 登录
export async function loginWithOAuth(
  provider: "google" | "github" | "facebook",
  callbackURL: string,
): Promise<void> {
  await pb.collection("users").authWithOAuth2({
    provider,
    callbackURL,
    urlCallback: (url) => {
      window.location.href = url;
    },
  });
}

import { defineStore } from "pinia";
import {
  login,
  logout as apiLogout,
  getCurrentUser,
  isAuthenticated,
  updateProfile,
  changePassword,
} from "@/api/auth";
import type {
  UserResponse,
  LoginCredentials,
  RegisterData,
} from "@/types/pocketbase";

export const useAuthStore = defineStore("auth", {
  state: () => ({
    user: getCurrentUser(),
    isLoading: false,
    error: null as string | null,
  }),

  getters: {
    isAuthenticated: (state) => !!state.user && isAuthenticated(),
    userName: (state) => state.user?.name || "",
    userRole: (state) => state.user?.role || "user",
    isAdmin: (state) => state.user?.role === "admin",
  },

  actions: {
    async login(credentials: LoginCredentials) {
      this.isLoading = true;
      this.error = null;

      try {
        const authData = await login(credentials);
        this.user = authData.record;

        // 持久化认证状态
        localStorage.setItem(
          "pocketbase_auth",
          JSON.stringify({
            token: authData.token,
            user: authData.record,
          }),
        );

        return authData;
      } catch (error: any) {
        this.error = error.message || "登录失败";
        throw error;
      } finally {
        this.isLoading = false;
      }
    },

    async logout() {
      apiLogout();
      this.user = null;
      localStorage.removeItem("pocketbase_auth");
    },

    async updateUser(data: FormData) {
      this.isLoading = true;
      try {
        const updated = await updateProfile({
          name: data.get("name") as string,
          avatar: data.get("avatar") as File,
        });
        this.user = updated;
      } finally {
        this.isLoading = false;
      }
    },
  },
});

import { computed } from "vue";
import { useAuthStore } from "@/stores/auth";

export function useAuth() {
  const authStore = useAuthStore();

  const login = async (email: string, password: string) => {
    return await authStore.login({ email, password });
  };

  const logout = () => {
    authStore.logout();
  };

  return {
    // 状态
    user: computed(() => authStore.user),
    isLoading: computed(() => authStore.isLoading),
    error: computed(() => authStore.error),

    // 计算属性
    isAuthenticated: computed(() => authStore.isAuthenticated),
    userName: computed(() => authStore.userName),
    isAdmin: computed(() => authStore.isAdmin),

    // 方法
    login,
    logout,
  };
}

<template>
  <div
    class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"
  >
    <div class="max-w-md w-full space-y-8">
      <div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          登录到您的账户
        </h2>
      </div>

      <form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
        <div v-if="error" class="rounded-md bg-red-50 p-4">
          <p class="text-sm text-red-800">{{ error }}</p>
        </div>

        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email" class="sr-only">邮箱地址</label>
            <input
              id="email"
              v-model="form.email"
              type="email"
              required
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
              placeholder="邮箱地址"
            />
          </div>
          <div>
            <label for="password" class="sr-only">密码</label>
            <input
              id="password"
              v-model="form.password"
              type="password"
              required
              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
              placeholder="密码"
            />
          </div>
        </div>

        <div>
          <button
            type="submit"
            :disabled="isLoading"
            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span v-if="isLoading">登录中...</span>
            <span v-else>登录</span>
          </button>
        </div>

        <div class="text-center">
          <router-link
            to="/register"
            class="font-medium text-indigo-600 hover:text-indigo-500"
          >
            还没有账户？立即注册
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useAuth } from "@/composables/useAuth";

const router = useRouter();
const { login, error, isLoading } = useAuth();

const form = ref({
  email: "",
  password: "",
});

const handleSubmit = async () => {
  try {
    await login(form.value.email, form.value.password);
    router.push("/dashboard");
  } catch (err) {
    // 错误已在 composable 中处理
  }
};
</script>

import { pb } from "./index";
import type {
  PostResponse,
  ListParams,
  PaginatedList,
} from "@/types/pocketbase";

// 获取文章列表
export async function getPosts(
  params: ListParams = {},
): Promise<PaginatedList<PostResponse>> {
  const {
    page = 1,
    perPage = 20,
    filter = "",
    sort = "-created",
    expand = "author",
  } = params;

  return await pb.collection("posts").getList(page, perPage, {
    filter,
    sort,
    expand,
  });
}

// 获取单篇文章
export async function getPost(id: string): Promise<PostResponse> {
  return await pb.collection("posts").getOne(id, {
    expand: "author",
  });
}

// 创建文章
export async function createPost(data: {
  title: string;
  content: string;
  excerpt: string;
  status: "draft" | "published";
  category: string;
  tags: string[];
}): Promise<PostResponse> {
  return await pb.collection("posts").create(data);
}

// 更新文章
export async function updatePost(
  id: string,
  data: Partial<PostResponse>,
): Promise<PostResponse> {
  return await pb.collection("posts").update(id, data);
}

// 删除文章
export async function deletePost(id: string): Promise<void> {
  await pb.collection("posts").delete(id);
}

// 获取已发布文章
export async function getPublishedPosts(
  params: ListParams = {},
): Promise<PaginatedList<PostResponse>> {
  return getPosts({
    ...params,
    filter: 'status = "published"',
  });
}

// 搜索文章
export async function searchPosts(query: string): Promise<PostResponse[]> {
  return await pb.collection("posts").getFullList({
    filter: `title ~ "${query}" || content ~ "${query}"`,
    sort: "-created",
  });
}

// 按分类获取文章
export async function getPostsByCategory(
  category: string,
): Promise<PostResponse[]> {
  return await pb.collection("posts").getFullList({
    filter: `category = "${category}" && status = "published"`,
    sort: "-created",
  });
}

import { ref, computed } from "vue";
import {
  getPosts,
  getPost,
  createPost,
  updatePost,
  deletePost,
  getPublishedPosts,
} from "@/api/posts";
import type { PostResponse, ListParams } from "@/types/pocketbase";

export function usePosts(initialParams: ListParams = {}) {
  const posts = ref<PostResponse[]>([]);
  const totalItems = ref(0);
  const currentPage = ref(1);
  const perPage = ref(initialParams.perPage || 20);
  const isLoading = ref(false);
  const error = ref<string | null>(null);

  // 获取文章列表
  const fetchPosts = async (params: ListParams = {}) => {
    isLoading.value = true;
    error.value = null;

    try {
      const result = await getPosts({
        page: currentPage.value,
        perPage: perPage.value,
        ...initialParams,
        ...params,
      });

      posts.value = result.items;
      totalItems.value = result.totalItems;
      currentPage.value = result.page;
    } catch (e: any) {
      error.value = e.message || "获取文章列表失败";
    } finally {
      isLoading.value = false;
    }
  };

  // 获取单篇文章
  const fetchPost = async (id: string) => {
    isLoading.value = true;
    error.value = null;

    try {
      return await getPost(id);
    } catch (e: any) {
      error.value = e.message || "获取文章失败";
      throw e;
    } finally {
      isLoading.value = false;
    }
  };

  // 创建文章
  const createNewPost = async (
    data: Omit<PostResponse, "id" | "created" | "updated">,
  ) => {
    isLoading.value = true;
    error.value = null;

    try {
      const newPost = await createPost(data as any);
      posts.value.unshift(newPost);
      return newPost;
    } catch (e: any) {
      error.value = e.message || "创建文章失败";
      throw e;
    } finally {
      isLoading.value = false;
    }
  };

  // 更新文章
  const updateExistingPost = async (
    id: string,
    data: Partial<PostResponse>,
  ) => {
    isLoading.value = true;
    error.value = null;

    try {
      const updated = await updatePost(id, data);
      const index = posts.value.findIndex((p) => p.id === id);
      if (index !== -1) {
        posts.value[index] = updated;
      }
      return updated;
    } catch (e: any) {
      error.value = e.message || "更新文章失败";
      throw e;
    } finally {
      isLoading.value = false;
    }
  };

  // 删除文章
  const removePost = async (id: string) => {
    isLoading.value = true;
    error.value = null;

    try {
      await deletePost(id);
      posts.value = posts.value.filter((p) => p.id !== id);
    } catch (e: any) {
      error.value = e.message || "删除文章失败";
      throw e;
    } finally {
      isLoading.value = false;
    }
  };

  // 分页
  const totalPages = computed(() =>
    Math.ceil(totalItems.value / perPage.value),
  );
  const hasNextPage = computed(() => currentPage.value < totalPages.value);
  const hasPrevPage = computed(() => currentPage.value > 1);

  const nextPage = () => {
    if (hasNextPage.value) {
      currentPage.value++;
      fetchPosts();
    }
  };

  const prevPage = () => {
    if (hasPrevPage.value) {
      currentPage.value--;
      fetchPosts();
    }
  };

  const goToPage = (page: number) => {
    currentPage.value = page;
    fetchPosts();
  };

  // 初始加载
  fetchPosts();

  return {
    // 状态
    posts: computed(() => posts.value),
    totalItems: computed(() => totalItems.value),
    currentPage: computed(() => currentPage.value),
    totalPages,
    hasNextPage,
    hasPrevPage,
    isLoading: computed(() => isLoading.value),
    error: computed(() => error.value),

    // 方法
    fetchPosts,
    fetchPost,
    createNewPost,
    updateExistingPost,
    removePost,
    nextPage,
    prevPage,
    goToPage,
  };
}

<template>
  <div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">文章列表</h1>
      <router-link
        to="/posts/new"
        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
      >
        新建文章
      </router-link>
    </div>

    <div v-if="isLoading" class="text-center py-8">
      <div
        class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"
      ></div>
    </div>

    <div v-else-if="error" class="bg-red-50 text-red-800 p-4 rounded">
      {{ error }}
    </div>

    <div v-else-if="posts.length === 0" class="text-center py-8 text-gray-500">
      暂无文章
    </div>

    <div v-else>
      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="post in posts"
          :key="post.id"
          class="bg-white rounded-lg shadow hover:shadow-md transition-shadow"
        >
          <img
            v-if="post.image"
            :src="pb.files.getUrl(post, post.image)"
            class="w-full h-48 object-cover rounded-t-lg"
          />
          <div class="p-4">
            <span class="text-sm text-indigo-600">{{ post.category }}</span>
            <h3 class="text-lg font-semibold mt-1">
              <router-link :to="`/posts/${post.id}`">
                {{ post.title }}
              </router-link>
            </h3>
            <p class="text-gray-600 mt-2 line-clamp-2">{{ post.excerpt }}</p>
            <div
              class="flex items-center justify-between mt-4 text-sm text-gray-500"
            >
              <span>{{ formatDate(post.created) }}</span>
              <span>{{ post.views }} 次浏览</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex justify-center gap-2 mt-8">
        <button
          @click="prevPage"
          :disabled="!hasPrevPage"
          class="px-4 py-2 border rounded disabled:opacity-50"
        >
          上一页
        </button>
        <span class="px-4 py-2"> {{ currentPage }} / {{ totalPages }} </span>
        <button
          @click="nextPage"
          :disabled="!hasNextPage"
          class="px-4 py-2 border rounded disabled:opacity-50"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usePosts } from "@/composables/usePosts";
import { pb } from "@/api";

const {
  posts,
  currentPage,
  totalPages,
  hasNextPage,
  hasPrevPage,
  isLoading,
  error,
  nextPage,
  prevPage,
} = usePosts({ perPage: 12 });

const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString("zh-CN");
};
</script>

<template>
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <h1 class="text-2xl font-bold mb-6">
      {{ isEditing ? "编辑文章" : "新建文章" }}
    </h1>

    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div>
        <label class="block text-sm font-medium text-gray-700">标题</label>
        <input
          v-model="form.title"
          type="text"
          required
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700">摘要</label>
        <textarea
          v-model="form.excerpt"
          rows="2"
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        ></textarea>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700">内容</label>
        <textarea
          v-model="form.content"
          rows="15"
          required
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        ></textarea>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">分类</label>
          <select
            v-model="form.category"
            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
          >
            <option value="">选择分类</option>
            <option value="tech">技术</option>
            <option value="life">生活</option>
            <option value="thoughts">随想</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700">状态</label>
          <select
            v-model="form.status"
            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
          >
            <option value="draft">草稿</option>
            <option value="published">已发布</option>
          </select>
        </div>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700"
          >标签（逗号分隔）</label
        >
        <input
          v-model="tagsInput"
          type="text"
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
          placeholder="vue, pocketbase, tutorial"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700">封面图片</label>
        <input
          type="file"
          @change="handleFileChange"
          accept="image/*"
          class="mt-1 block w-full"
        />
        <div v-if="previewImage" class="mt-2">
          <img :src="previewImage" class="h-32 rounded" />
        </div>
      </div>

      <div class="flex gap-4">
        <button
          type="submit"
          :disabled="isSaving"
          class="px-6 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-50"
        >
          {{ isSaving ? "保存中..." : "保存" }}
        </button>
        <button
          type="button"
          @click="$router.back()"
          class="px-6 py-2 border border-gray-300 rounded hover:bg-gray-50"
        >
          取消
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { usePosts } from "@/composables/usePosts";
import { pb } from "@/api";

const router = useRouter();
const route = useRoute();
const { createNewPost, updateExistingPost, fetchPost } = usePosts();

const isEditing = computed(() => !!route.params.id);
const isSaving = ref(false);

const form = ref({
  title: "",
  excerpt: "",
  content: "",
  category: "",
  status: "draft" as "draft" | "published",
});

const tagsInput = ref("");
const imageFile = ref<File | null>(null);
const previewImage = ref("");

const handleSubmit = async () => {
  isSaving.value = true;

  try {
    const tags = tagsInput.value
      .split(",")
      .map((t) => t.trim())
      .filter(Boolean);

    const formData = new FormData();
    formData.append("title", form.value.title);
    formData.append("excerpt", form.value.excerpt);
    formData.append("content", form.value.content);
    formData.append("category", form.value.category);
    formData.append("status", form.value.status);
    tags.forEach((tag) => formData.append("tags", tag));
    if (imageFile.value) {
      formData.append("image", imageFile.value);
    }

    if (isEditing.value) {
      await updateExistingPost(
        route.params.id as string,
        Object.fromEntries(formData),
      );
    } else {
      await createNewPost(Object.fromEntries(formData) as any);
    }

    router.push("/posts");
  } catch (err) {
    console.error("保存失败:", err);
  } finally {
    isSaving.value = false;
  }
};

const handleFileChange = (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (target.files?.[0]) {
    imageFile.value = target.files[0];
    previewImage.value = URL.createObjectURL(target.files[0]);
  }
};

onMounted(async () => {
  if (isEditing.value) {
    const post = await fetchPost(route.params.id as string);
    form.value = {
      title: post.title,
      excerpt: post.excerpt,
      content: post.content,
      category: post.category,
      status: post.status,
    };
    tagsInput.value = post.tags.join(", ");
    if (post.image) {
      previewImage.value = pb.files.getUrl(post, post.image);
    }
  }
});
</script>

import { ref, onUnmounted } from "vue";
import { pb } from "@/api";

type SubscriptionCallback = (data: {
  action: "create" | "update" | "delete";
  record: any;
}) => void;

export function useRealtime(collection: string) {
  const isConnected = ref(false);
  const callbacks = new Set<SubscriptionCallback>();

  let unsubscribe: (() => void) | null = null;

  const subscribe = (callback: SubscriptionCallback) => {
    callbacks.add(callback);

    // 首次订阅时建立连接
    if (callbacks.size === 1) {
      pb.collection(collection).subscribe(
        "*",
        (e) => {
          isConnected.value = true;
          callbacks.forEach((cb) => cb(e));
        },
        {
          // 自动重连
          expand: "author",
        },
      );
    }
  };

  const unsubscribeAll = () => {
    callbacks.clear();
    if (unsubscribe) {
      unsubscribe();
      unsubscribe = null;
    }
    pb.collection(collection).unsubscribe();
    isConnected.value = false;
  };

  // 组件卸载时取消订阅
  onUnmounted(() => {
    unsubscribeAll();
  });

  return {
    isConnected,
    subscribe,
    unsubscribe: unsubscribeAll,
  };
}

// 专用文章实时订阅
export function usePostsRealtime() {
  const { isConnected, subscribe, unsubscribe } = useRealtime("posts");
  const newPosts = ref<any[]>([]);

  const onCreate = (callback: (post: any) => void) => {
    subscribe((e) => {
      if (e.action === "create") {
        newPosts.value.unshift(e.record);
        callback(e.record);
      }
    });
  };

  const onUpdate = (callback: (post: any) => void) => {
    subscribe((e) => {
      if (e.action === "update") {
        callback(e.record);
      }
    });
  };

  const onDelete = (callback: (postId: string) => void) => {
    subscribe((e) => {
      if (e.action === "delete") {
        callback(e.record.id);
      }
    });
  };

  return {
    isConnected,
    newPosts,
    onCreate,
    onUpdate,
    onDelete,
    unsubscribe,
  };
}