Solid

Installation

sh

npm i @rouage/solid

This is an ESM-only package. Type definitions are included.

Configuration

tsx

import { SyncEngine, SyncProvider } from '@rouage/solid'

export const syncEngine = new SyncEngine({
  roomId: 'account123',
})

export default function App() {
  return (
    <SyncProvider value={syncEngine}>
      <Posts />
    </SyncProvider>
  )
}

Data Fetching

ts

async function fetchPosts() {
  const response = await fetch('https://jsonplaceholder.org/posts')
  return response.json() as unknown as Post[]
}

tsx

import { Show, For } from 'solid-js'

function Posts() {
  const { data, isLoading } = createQuery({
    queryKey: ['posts'],
    queryCall: fetchPosts,
  })

  return (
    <Show when={!isLoading()} fallback="Loading...">
      <For each={data()}>
        {post => <div>{post.title}</div>}
      </For>
    </Show>
  )
}