TanStack Query

bun add @questpie/tanstack-query @tanstack/react-query

import { useQuery } from "@tanstack/react-query";
import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
import { client } from "@/lib/client";
import type { AppConfig } from "#questpie";

const q = createQuestpieQueryOptions<AppConfig>(client);

// List with filters
function ServiceList() {
	const { data, isLoading } = useQuery(
		q.collections.services.find({
			where: { isActive: true },
			orderBy: { name: "asc" },
			limit: 20,
		}),
	);

	if (isLoading) return <div>Loading...</div>;

	return (
		<ul>
			{data?.docs.map((service) => (
				<li key={service.id}>
					{service.name} — {service.price}¢
				</li>
			))}
		</ul>
	);
}

// Single item
function ServiceDetail({ id }: { id: string }) {
	const { data: service } = useQuery(
		q.collections.services.findOne({
			where: { id },
			with: { barbers: true },
		}),
	);

	if (!service) return null;
	return <div>{service.name}</div>;
}

import { useMutation } from "@tanstack/react-query";

function CreateServiceForm() {
	const create = useMutation(q.collections.services.create());

	const handleSubmit = (data) => {
		create.mutate({
			name: data.name,
			duration: data.duration,
			price: data.price,
			isActive: true,
		});
	};

	return <form onSubmit={handleSubmit}>...</form>;
}

import { useMutation, useQuery } from "@tanstack/react-query";

function SiteSettings() {
	const { data: settings } = useQuery(q.globals.siteSettings.get());
	const update = useMutation(q.globals.siteSettings.update());

	return (
		<div>
			<h1>{settings?.shopName}</h1>
			<button onClick={() => update.mutate({ data: { shopName: "New Name" } })}>
				Update
			</button>
		</div>
	);
}

import { useQuery, useMutation } from "@tanstack/react-query";
import { client } from "@/lib/client";

function BookingForm() {
  const { data: barbers } = useQuery({
    queryKey: ["barbers", "active"],
    queryFn: () => client.routes.getActiveBarbers({}),
  });

  const booking = useMutation({
    mutationFn: (data) => client.routes.createBooking(data),
  });

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      booking.mutate({ barberId: "...", serviceId: "...", ... });
    }}>
      {/* form fields */}
    </form>
  );
}