TanStack Query Integration

'use client'

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Form } from '@letar/forms'
import { ProductCreateFormSchema } from '@/generated/form-schemas'

function EditProductForm({ id }: { id: string }) {
  const queryClient = useQueryClient()

  // Load product data
  const { data: product, isLoading } = useQuery({
    queryKey: ['product', id],
    queryFn: () => fetch(`/api/products/${id}`).then((r) => r.json()),
  })

  // Submit mutation
  const mutation = useMutation({
    mutationFn: (data) =>
      fetch(`/api/products/${id}`, {
        method: 'PUT',
        body: JSON.stringify(data),
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] })
      queryClient.invalidateQueries({ queryKey: ['product', id] })
    },
  })

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

  return (
    <Form schema={ProductCreateFormSchema} initialValue={product} onSubmit={async (data) => mutation.mutateAsync(data)}>
      <Form.AutoFields />
      <Form.DebugValues />
      <Form.Button.Submit disabled={mutation.isPending}>{mutation.isPending ? 'Saving...' : 'Save'}</Form.Button.Submit>
    </Form>
  )
}

const mutation = useMutation({
  mutationFn: (data) => fetch('/api/products', {
    method: 'POST',
    body: JSON.stringify(data),
  }),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['products'] })
    router.push('/products')
  },
})

<Form.FromSchema
  schema={ProductCreateFormSchema}
  initialValue={defaults}
  onSubmit={async (data) => mutation.mutateAsync(data)}
  submitLabel={mutation.isPending ? 'Creating...' : 'Create'}
/>

import { createProduct } from '@/app/_actions/product.action'

;<Form.FromSchema
  schema={ProductCreateFormSchema}
  initialValue={defaults}
  onSubmit={async (data) => createProduct(data)}
  submitLabel="Create Product"
/>

function ProductList() {
  const { data: products, isLoading } = useQuery({
    queryKey: ['products'],
    queryFn: () => fetch('/api/products').then((r) => r.json()),
  })

  if (isLoading) return <Spinner />

  return products.map((product) => <ProductCard key={product.id} product={product} />)
}

const mutation = useMutation({
  mutationFn: updateProduct,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ['products'] })
    const previous = queryClient.getQueryData(['products'])
    queryClient.setQueryData(['products'], (old) => old.map((p) => (p.id === newData.id ? { ...p, ...newData } : p)))
    return { previous }
  },
  onError: (_err, _vars, context) => {
    queryClient.setQueryData(['products'], context.previous)
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['products'] })
  },
})

bun add @letar/forms-query

import {
  fromSearchQuery,
  fromSelectedQuery,
  type SearchQueryOptions,
  type SelectedQueryOptions,
  useQueryOptions,
} from '@letar/forms-query'

// A whole dictionary — Select
const regions = useQueryOptions(useFindManyRegion(), toOption)
<Form.Field.Select name="regionId" {...regions.fieldProps} />

// A growing catalog — Combobox: `enabled` by `minChars` and `keepPreviousData` are added for you.
// The hooks live at module level: the rules of hooks do not allow calling them inside an arrow in JSX
const useCategorySearch = (search: string, options: SearchQueryOptions) =>
  useFindManyCategory({ where: { name: { contains: search } }, take: 20 }, options)
const useCategoryById = (id: string, options: SelectedQueryOptions) =>
  useFindUniqueCategory({ where: { id } }, options)

<Form.Field.Combobox
  name="categoryId"
  useQuery={fromSearchQuery(useCategorySearch)}
  useSelected={fromSelectedQuery(useCategoryById)}
  getLabel={(c) => c.name}
  getValue={(c) => c.id}
/>