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:

import {ZeroProvider} from '@rocicorp/zero/solid'
import {useSession} from 'my-auth-provider'
import App from 'App.tsx'
import {schema} from 'schema.ts'
import {mutators} from 'mutators.ts'
 
const cacheURL = import.meta.env.VITE_PUBLIC_ZERO_CACHE_URL!
 
function Root() {
  const session = useSession()
  const {userID} = session
  const context = {userID}
 
  return (
    <ZeroProvider
      {...{userID, context, cacheURL, schema, mutators}}
    >
      <App />
    </ZeroProvider>
  )
}

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

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

Usage

Use useQuery to run queries:

import {useQuery} from '@rocicorp/zero/solid'
import {queries} from 'queries.ts'
 
function App() {
  const [posts] = useQuery(() =>
    queries.posts.byStatus({status: 'draft'})
  )
 
  return (
    <For each={posts()}>
      {post => (
        <div key={post.id}>
          {post.title} - ({post.comments.length} comments)
        </div>
      )}
    </For>
  )
}

Use useZero to get access to the Zero instance, for example to run mutators:

import {useZero} from '@rocicorp/zero/solid'
import {mutators} from 'mutators.ts'
 
function CompleteButton({issueID}: {issueID: string}) {
  const zero = useZero()
 
  const onClick = () => {
    zero().mutate(mutators.issues.complete({id: issueID}))
  }
 
  return <button onClick={onClick}>Complete Issue</button>
}

Examples

See the complete quickstart here:

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