React Query Provider

@vibeflui/react-query provides a plugin-backed data provider that can use a TanStack Query client.

Install

BASH

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

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

The default provider name is reactQuery.

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;

Custom provider name

const reactQueryPlugin = createReactQueryPlugin({
  queryClient,
  providerName: "adminQuery"
});

provider: {
  type: "custom",
  name: "adminQuery"
}

Query and mutation behavior

Read operations use:

queryClient.ensureQueryData when available.
queryClient.fetchQuery when available.
The base provider directly.

Mutation operations run through the base provider and invalidate queries unless invalidateOnMutation is false.

Common mistakes

The React Query plugin is a provider plugin, not a field adapter.
Configure endpoints unless a custom baseProvider handles every operation.
Use the same provider name in plugin setup and schema config.