# 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:

```tsx
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?.userID
  const auth = session?.accessToken
  const context = userID ? {userID} : undefined

  return (
    <ZeroProvider
      {...{
        userID,
        auth,
        context,
        cacheURL,
        schema,
        mutators
      }}
    >
      <App />
    </ZeroProvider>
  )
}
```

If you use token auth, pass it with `auth={session?.jwt}`. If you use cookie auth, omit the parameter entirely.

When `auth` changes from one string to another, `ZeroProvider` refreshes auth in place with `zero.connection.connect({auth})`. When `auth` is added or removed, or `userID` changes, it recreates the `Zero` instance.

When the user is logged out, omit the `userID` entirely.

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

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

When you pass `zero={zero}`, `ZeroProvider` only provides SolidJS Context. It does not manage auth updates for that instance, so if you are using token auth, call `zero.connection.connect({auth: newToken})` yourself or recreate the instance when the user changes.

## Usage

Use `useQuery` to run queries:

```tsx
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:

```tsx
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](https://github.com/rocicorp/hello-zero-solid)

**For AI agents**: to view all the available documentation, visit https://zero.rocicorp.dev/llms.txt