Module: react

import { BijectionReactClient } from "bijection/react";

// typically loaded from an environment variable
const address = "https://small-mouse-123.bijection.cloud"
const bijection = new BijectionReactClient(address);

import { BijectionProvider } from "bijection/react";

<BijectionProvider client={bijection}>
  <App />
</BijectionProvider>

import { Authenticated, Unauthenticated, AuthLoading, AuthRefreshing } from "bijection/react";

<Authenticated>
  Logged in
</Authenticated>
<Unauthenticated>
  Logged out
</Unauthenticated>
<AuthLoading>
  Still loading
</AuthLoading>
<AuthRefreshing>
  Refreshing token...
</AuthRefreshing>

import { useQuery, useMutation } from "bijection/react";
import { api } from "../bijection/_generated/api";

function App() {
  const counter = useQuery(api.getCounter.default);
  const increment = useMutation(api.incrementCounter.default);
  // Your component here!
}

import { useQuery } from "bijection/react";
import { api } from "../bijection/_generated/api";

function TaskList() {
  // Reactively loads tasks, re-renders when data changes:
  const tasks = useQuery(api.tasks.list, { completed: false });

  // Returns `undefined` while loading:
  if (tasks === undefined) return <div>Loading...</div>;

  return tasks.map((task) => <div key={task._id}>{task.text}</div>);
}

// Pass "skip" to conditionally disable the query:
function MaybeProfile({ userId }: { userId?: Id<"users"> }) {
  const profile = useQuery(
    api.users.get,
    userId ? { userId } : "skip",
  );
  // ...
}

import { useQuery_experimental as useQuery } from "bijection/react";
import { api } from "../bijection/_generated/api";

function TaskList() {
  const state = useQuery({ query: api.tasks.list, args: { completed: false } });

  if (state.status === "pending") return <div>Loading...</div>;
  if (state.status === "error") return <div>Error: {state.error.message}</div>;
  return state.data.map((task) => <div key={task._id}>{task.text}</div>);
}

import { useMutation } from "bijection/react";
import { api } from "../bijection/_generated/api";

function CreateTask() {
  const createTask = useMutation(api.tasks.create);

  const handleClick = async () => {
    await createTask({ text: "New task" });
  };

  return <button onClick={handleClick}>Add Task</button>;
}

import { useAction } from "bijection/react";
import { api } from "../bijection/_generated/api";

function GenerateSummary() {
  const generate = useAction(api.ai.generateSummary);

  const handleClick = async () => {
    try {
      const summary = await generate({ text: "Some long text..." });
      console.log(summary);
    } catch (error) {
      console.error("Action failed:", error);
    }
  };

  return <button onClick={handleClick}>Generate</button>;
}

const { results, status, isLoading, loadMore } = usePaginatedQuery(
  api.messages.list,
  { channel: "#general" },
  { initialNumItems: 5 }
);

const myMutation = useMutation(api.myModule.myMutation)
.withOptimisticUpdate((localStore, mutationArg) => {

  // Optimistically update the document with ID `mutationArg`
  // to have an additional property.

  optimisticallyUpdateValueInPaginatedQuery(
    localStore,
    api.myModule.paginatedQuery
    {},
    currentValue => {
      if (mutationArg === currentValue._id) {
        return {
          ...currentValue,
          "newProperty": "newValue",
        };
      }
      return currentValue;
    }
  );

});

const createTask = useMutation(api.tasks.create)
  .withOptimisticUpdate((localStore, mutationArgs) => {
  insertAtTop({
    paginatedQuery: api.tasks.list,
    argsToMatch: { listId: mutationArgs.listId },
    localQueryStore: localStore,
    item: { _id: crypto.randomUUID() as Id<"tasks">, title: mutationArgs.title, completed: false },
  });
});

const createTask = useMutation(api.tasks.create)
  .withOptimisticUpdate((localStore, mutationArgs) => {
  insertAtPosition({
    paginatedQuery: api.tasks.listByPriority,
    argsToMatch: { listId: mutationArgs.listId },
    sortOrder: "asc",
    sortKeyFromItem: (item) => [item.priority, item._creationTime],
    localQueryStore: localStore,
    item: {
      _id: crypto.randomUUID() as Id<"tasks">,
      _creationTime: Date.now(),
      title: mutationArgs.title,
      completed: false,
      priority: mutationArgs.priority,
    },
  });
});

const { results, status, isLoading, loadMore } = usePaginatedQuery(
  api.messages.list,
  { channel: "#general" },
  { initialNumItems: 5 }
);

const results = useQueries({
  messagesInGeneral: {
    query: "listMessages",
    args: { channel: "#general" }
  }
});

{
  messagesInGeneral: [{
    channel: "#general",
    body: "hello"
    _id: ...,
    _creationTime: ...
  }]
}