@vibeflui/react-query

Optional TanStack Query-compatible provider plugin for VibeFlui / FluiKit.

This package does not make TanStack Query mandatory in @vibeflui/core. It accepts a QueryClient-like object and registers a FluiKit provider.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { FluiKit, FluiKitProvider } from "@vibeflui/core"
import { createReactQueryPlugin } from "@vibeflui/react-query"

const queryClient = new QueryClient()
const reactQueryPlugin = createReactQueryPlugin({ queryClient })

export function UsersPage() {
  return (
    <QueryClientProvider client={queryClient}>
      <FluiKitProvider plugins={[reactQueryPlugin]}>
        <FluiKit schema={usersSchema} />
      </FluiKitProvider>
    </QueryClientProvider>
  )
}

Use the registered provider from schema:

export const usersSchema = {
  resource: "users",
  endpoint: "/api/users",
  provider: {
    type: "custom",
    name: "reactQuery"
  },
  table: {
    columns: ["name", "email", "role.name", "status"]
  },
  form: {
    fields: ["name", "email"]
  }
}

Default query keys are ["fluikit", resource, operation, ...]. Mutations invalidate ["fluikit", resource] by default.