React Query Plugin

@vibeflui/react-query registers a TanStack Query-compatible data provider. It does not render fields or table cells; it changes how list/detail/create/update/delete/action operations are executed.

Install

BASH

npm install @vibeflui/core @vibeflui/react-query @tanstack/react-query

@tanstack/react-query is an optional peer dependency in the package metadata, but real query-client integration needs a compatible query client.

Public exports

Export	Purpose
`createReactQueryPlugin`	Creates a plugin that registers a provider.
`ReactQueryPlugin`	Alias for `createReactQueryPlugin`.
`createReactQueryProvider`	Creates only the provider object.
`defaultReactQueryKey`	Default query key resolver.
`defaultReactQueryInvalidationKey`	Default mutation invalidation key resolver.

Registered slots

Slot	Keys
`providers`	Defaults to `reactQuery`, configurable with `providerName`.
`messages`	`loadError`, `submitError`
`inspectorPanels`	`react-query` metadata entry

Minimal setup

TSX

import { QueryClient } 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 (
    <FluiKitProvider plugins={[reactQueryPlugin]}>
      <FluiKit schema={usersSchema} />
    </FluiKitProvider>
  );
}

Schema usage

export const usersSchema = {
  resource: "users",
  provider: {
    type: "custom",
    name: "reactQuery"
  },
  endpoint: {
    list: { url: "/api/users", method: "GET" },
    create: { url: "/api/users", method: "POST" },
    update: { url: "/api/users/:id", method: "PATCH" },
    delete: { url: "/api/users/:id", method: "DELETE" }
  },
  table: {
    mode: "server",
    dataPath: "data",
    totalPath: "meta.total",
    columns: ["name", "email", "status"]
  }
} as const;

Query behavior

Read operations use ensureQueryData when available, then fetchQuery, then the base provider. Mutation operations run through the base provider and invalidate queries unless invalidateOnMutation is false.

const reactQueryPlugin = createReactQueryPlugin({
  queryClient,
  providerName: "adminQuery",
  invalidateOnMutation: true,
  refetchOnMutation: true,
  queryKey: (context, operation) => ["admin", context.schema.resource, operation, context.params]
});

Common mistakes

Use the plugin and provider exports shown above.
Do not use this plugin for field rendering. It is a data provider plugin.
Put the plugin provider name in provider.name; use provider.type: "custom" for plugin-backed providers.