SolidJS

Zero has built-in support for Solid. Here’s what basic usage looks like:

Setup

Use the ZeroProvider component to setup Zero. It takes care of creating and destroying Zero instances reactively:

Copyimport App from "./App.tsx";
import { schema } from "../shared/schema.ts";
import {useSession} from 'my-auth-provider';
import { ZeroProvider } from "@rocicorp/zero/solid";
import { createMutators } from "../shared/mutators.ts";

function Root() {
  const session = useSession();
  const {userID, authToken: auth} = session;
  const server = import.meta.env.VITE_PUBLIC_SERVER;

  const zeroOptions = {
    userID,
    auth: encodedJWT,
    server: import.meta.env.VITE_PUBLIC_SERVER,
    schema,
    mutators: createMutators(authData),
  };

  return (
    <ZeroProvider {...zeroOptions}>
      <App />
    </ZeroProvider>
  );
}

You can also pass a Zero instance to the ZeroProvider if you want to control the lifecycle of the Zero instance yourself:

Copy// ZeroProvider just sets up the context, it doesn't manage
// the lifecycle of the Zero instance.
<ZeroProvider zero={zero}>
  <App />
</ZeroProvider>

Usage

Use useZero to get the current Zero instance, then useQuery to run queries:

Copyimport {useQuery, useZero} from '@rocicorp/zero/solid';
import {type Schema} from './schema.ts';

function App() {
  const zero = useZero<Schema, Mutators>()();
  const userID = selectedUserID();

  const [posts] = useQuery(() =>
    zero.query.posts
      .where('author_id', userID)
      .related('comments'));

  return (
    <div>
      <For each={posts()}>
        {(post) => (
          <div key={post.id}>
            {post.title} - ({post.comments.length} comments)
          </div>
        )}
      </For>
    </div>
  );
}

Examples

See the complete quickstart here:

https://github.com/rocicorp/hello-zero-solid