Tanstack Router

Introduction

The @triplit/tanstack package provides seamless integration between Tanstack Router and Triplit, allowing you to use a Triplit query as the loader for a route which will automatically be subscribed to and update to both changes from the server as well as optimistic updates from the client.

Installation

To get started make sure you have Tanstack Router setup (opens in a new tab) then install the @triplit/tanstack package:

npm i @triplit/tanstack

`triplitRoute`

The triplitRoute function is an integration between Tanstack Router and the Triplit client. It helps define a route with data fetched from the Triplit client and a component to render based on the fetched data.

triplitRoute(triplitClient: TriplitClient, query: ClientQuery, Component: ReactComponent): RouteConfig;

Parameters

triplitClient: The instance of the Triplit client, which is used to query the data from the Triplit API.
query: A Client Query or function that returns a query to be run using the triplitClient. The function receives an object containing the params for the route.
Component: A React component that renders the data fetched by the triplitClient. The component receives the following props:
- results: An array containing the results of the query
- error: An error if the query's subscription has an error

Returns

triplitRoute returns a route configuration object, which can be passed to Tanstack Router's route creation functions such as createFileRoute.

Example Usage

Here’s an example of how to use the triplitRoute function with the Tanstack Router to define a route for displaying contact details:

src/routes/$contactId.tsx

import { createFileRoute } from '@tanstack/react-router';
import { triplitRoute } from '@triplit/tanstack';
import { triplitClient } from '../triplit.js';
 
 
export const Route = createFileRoute('/$contactId')(
  triplitRoute(
    triplitClient,
    ({ params }) =>
      triplitClient
        .query('contacts')
        .where('id', '=', params.contactId)
        .limit(1)
        .build(),
    ContactComponent({ results }) {
      if (results.length === 0) {
        return <div>Contact not found</div>;
      }
      const contact = results[0];
      return (
        <div>
          {/* Render the contact */}
        </div>
      );
    }
  )
);

Extending the Route

The triplitRoute funciton can be extended and overriden with additional Tanstack configuration options by spreading the returned route configuration object.

src/routes/$contactId.tsx

import { createFileRoute } from '@tanstack/react-router';
import { triplitRoute } from '@triplit/tanstack';
import { triplitClient } from '../triplit.js';
 
export const Route = createFileRoute('/$contactId')({
  ...triplitRoute(triplitClient, ({ params }) =>
    triplitClient
      .query('contacts')
      .where('id', '=', params.contactId)
      .limit(1)
      .build()
  ),
  // Additional properties can be added here
  onError: (error) => {
    console.error('Error fetching contact:', error);
  },
});

Svelte Vue