Skip to content

anisjonischkeit/tanstack-couch-db-collection

Repository files navigation

CouchDB Colletion for Tanstack DB

Install

pnpm install tanstack-couch-db-collection@github:anisjonischkeit/tanstack-couch-db-collection

Usage

import { createCollection } from "@tanstack/react-db";
import { couchDBCollectionOptions } from "tanstack-couch-db-collection";
import PouchDB from "pouchdb";

// This could be a local or a remote database. If you want a local and
// remote DB, you can let couch DB handle syncing between databases
// https://pouchdb.com/api.html#sync
const db = new PouchDB("local-db");

const schema = z.object({
  _id: z.string(),
  name: z.string(),
});

export const usersCollection = createCollection(
  couchDBCollectionOptions({
    couch: {
      db: db,
      // Optional config and defaults

      // mutationTimeout: 10_000,
      // filter: (doc) => !doc._id.startsWith("_"),
      // attachments: false,
      // binary: false,
    },
    schema: schema,
  }),
);

Then use it like any other Tanstack DB collection

// In React, subscribe to updates in your DB
const { data, isLoading } = useLiveQuery(usersCollection);

// Insert, update or delete data to your DB with optimistic updates
usersCollection.insert({
  _id: "3008fc4e-0813-4432-a989-a51cd4e881fb",
  name: "Something",
});

usersCollection.update({
  _id: "3008fc4e-0813-4432-a989-a51cd4e881fb",
  name: "Something",
});

usersCollection.delete({
  _id: "3008fc4e-0813-4432-a989-a51cd4e881fb",
});

// Join with other collections
const userPosts = createLiveQueryCollection((q) =>
  q
    .from({ user: usersCollection })
    // Posts can be another couchDB collection, or any other kind of collection
    .join({ post: postsCollection }, ({ user, post }) =>
      eq(user._id, post.userId),
    ),
);

See the Tanstack DB Docs for more

About

A CouchDB adaptor for TanStack DB - The best way to use CouchDB in modern React/Solid Apps

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published