Triplit Release Notes 3/29/2024

triplit schema push

triplit schema push is replacing the family of triplit migrate commands as the primary way to manage your remote database schema. This command will push your local schema to a Triplit syncing server, whether it's a dev server or a Triplit Cloud instance, and safely apply changes, or fail and rollback if there are any issues. It will log these issues and recommend methods to resolve them. These warnings, first introduced last week, have been improved and expanded. They look like this:

✖ Failed to push schema to server
Found 1 backwards incompatible schema changes.
Schema update failed. Please resolve the following issues:

Collection: 'todos'
        'tagIds'
                Issue: added an attribute where optional is not set
                Fix:   make 'tagIds' optional or delete all entities in 'todos' to allow this edit

New schema management guide

In conjunction with the new triplit schema push command, we have released a new guide on schema management. This guide will walk you through the process of updating your schema in production, with an emphasis on making backwards compatible changes and avoiding downtime.

subscribeWithPagination and usePaginatedQuery

Added a new subscribeWithPagination method to the TriplitClient class, which allows you to subscribe to a paginated query (i.e. one with a limit set) and use the nextPage and prevPage function to move between pages. There is a corresponding React hook, usePaginatedQuery that makes it easy to use this method in your React components:

import { usePaginatedQuery } from '@triplit/react';

const client = new TriplitClient();

function App() {
  const {
    results,
    fetchingPage,
    hasNextPage,
    hasPreviousPage,
    nextPage,
    prevPage,
  } = usePaginatedQuery(
    client,
    client.query('todos').limit(10).order('created_at', 'DESC')
  );

  return (
    <div>
      {results.entries().map((item) => (
        <div>{item.text}</div>
      ))}
      {fetchingPage && <div>Loading page...</div>}
      {hasPreviousPage && <button onClick={prevPage}>Previous page</button>}
      {hasNextPage && <button onClick={nextPage}>Next page</button>}
    </div>
  );
}

Seeding a dev server

We've added a new flag to the triplit dev command, --seed/-S, which will seed your dev server with data from a seed file. It works well with the --initWithSchema/-i flag, which will apply the schema saved at ./triplit/schema.ts in your project directory to dev server on startup.

Create a seed file with

triplit seed create my-first-seed

Add some data to the seed file, then run:

triplit dev --initWithSchema --seed=my-first-seed

Syncing optimizations

We've made substantial optimizations to reduce data synced between server and client and efficiency improvements to subscriptions. When used with a front end framework and the Triplit React hooks, this should result in fewer unnecessary re-renders.