Integrating SignalDB with Solid.js

This guide walks you through how to set up and use SignalDB within your Solid project. We’ll cover the initial setup steps and demonstrate how to incorporate SignalDB into your Solid components.

Requirements

Before proceeding, make sure you’re familiar with the basics of Solid and have a Solid project ready. If you're new to Solid, check out the SolidStart Getting Started guide.

An understanding of signal-based reactivity will also be useful. If you're not familiar with this concept, refer to the Core Concepts section or the Solid Documentation for an introduction.

Installation

Begin by installing SignalDB. Run the following command in your terminal:

npm install signaldb

Next, install the Solid reactivity adapter to integrate Solid signals with SignalDB:

npm install signaldb-plugin-solid

Setting Up

To integrate SignalDB into your Solid project, define your collections and configure the reactivity adapter. You can create this setup in a file for later use in your components.

// Posts.js
import { Collection } from 'signaldb'
import solidReactivityAdapter from 'signaldb-plugin-solid'

const Posts = new Collection({
  reactivity: solidReactivityAdapter,
})

export default Posts

Using SignalDB in Components

With the basic setup in place, you can now use SignalDB in your Solid components. Below is an example component that displays a list of posts:

import { For } from "solid-js";
import Posts from './Posts'

const PostList = () => (
  <ul>
    <li>
      <button type="button" onClick={() => Posts.insert({ title: 'Test', author: 'Test' })}>
        Add
      </button>
    </li>

    <For each={Posts.find({}, { sort: { time: -1 } }).fetch()}>{post => (
      <li>
        {post.title} <span>({post.author})</span>
      </li>
    )}</For>
  </ul>
)

In this example, the .find() and .fetch() methods are used to retrieve data. The component automatically re-renders whenever the Posts collection is updated. Click the "Add" button to test the reactivity.

Final Thoughts

You’ve now set up SignalDB in your Solid project and created a reactive component to display posts. With this, you can manage your data effectively and build reactive components in your Solid apps.

Next Steps

Now that you’ve learned how to use SignalDB in Angular, you maybe want to explore the possibilities how you can synchronize the data with your backend. Take a look at the Synchronization Overview to get started