SolidJS

To start, import the Solid client creator from the fragment package.

lib/example-fragment-client.ts

import { createExampleFragmentClient } from "@fragno-dev/example-fragment/solid";

export const exampleFragment = createExampleFragmentClient();

Basic Usage

In this example, we're using the useData hook to read from a GET route defined in the example-fragment library. Fragno hooks in Solid return signals (functions), so you need to call them to access the values.

components/ExampleComponent.tsx

import { createExampleFragmentClient } from "@fragno-dev/example-fragment/solid";
import { Show } from "solid-js";

export default function ExampleComponent() {
  const { useData } = createExampleFragmentClient();
  const { data, loading, error } = useData();

  return (
    <div>
      <h1>Example Component</h1>

      <Show when={loading()}>
        <div>Loading...</div>
      </Show>

      <Show when={error()}>
        <div>Error: {error()?.message}</div>
      </Show>

      <Show when={data()}>
        <div>{data()}</div>
      </Show>
    </div>
  );
}

Reactivity

Fragno hooks support Solid's reactivity out of the box. Signals can be passed to hooks as path or query parameters to automatically update the hook when the signal changes.

components/UserProfile.tsx

import { createSignal, Show } from "solid-js";
import { createExampleFragmentClient } from "@fragno-dev/example-fragment/solid";

const { useUser } = createExampleFragmentClient();

export default function UserProfile() {
  const [userId, setUserId] = createSignal("1");
  const [orgId, setOrgId] = createSignal("1");

  const { data: user, loading } = useUser({
    path: { id: userId, orgId },
  });

  return (
    <div>
      <Show when={loading()}>
        <div>Loading user...</div>
      </Show>

      <Show when={user()}>
        <div>User: {user()?.name}</div>
        <button
          onClick={() => {
            setUserId("2");
            setOrgId("2");
          }}
        >
          Switch to User 2
        </button>
      </Show>
    </div>
  );
}

Mutations

components/TodoComponent.tsx

import { createExampleFragmentClient } from "@fragno-dev/example-fragment/solid";
import { Show, For } from "solid-js";

const { useTodos, useAddTodo } = createExampleFragmentClient();

export default function TodoComponent() {
  const { data: todos, loading: todosLoading, error, refetch } = useTodos();
  const { mutate: addTodo, loading: addTodoLoading } = useAddTodo();

  return (
    <div>
      <h1>Todos</h1>

      <Show when={todosLoading()}>
        <div>Loading...</div>
      </Show>

      <Show when={error()}>
        <div>Error: {error()?.message}</div>
      </Show>

      <Show when={todos()}>
        <For each={todos()}>
          {(todo) => (
            <div>
              {todo.text} - {todo.done ? "Done" : "Pending"}
            </div>
          )}
        </For>
      </Show>

      <button onClick={() => addTodo({ body: { text: "New todo" } })} disabled={addTodoLoading()}>
        {addTodoLoading() ? "Adding..." : "Add Todo"}
      </button>

      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

Basic Usage

Reactivity

Mutations

On this page