or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-setup.mdauthentication.mddata-operations.mdforms.mdindex.mdnavigation.mdtables-lists.mdutilities.md
tile.json

tessl/npm-refinedev--core

React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@refinedev/core@5.0.x

To install, run

npx @tessl/cli install tessl/npm-refinedev--core@5.0.0

index.mddocs/

Refine Core

Refine Core is a React meta-framework for building enterprise CRUD applications with authentication, data management, and headless UI integration. It provides a comprehensive set of hooks, components, and utilities for rapid development of data-intensive applications with minimal boilerplate.

Package Information

  • Package Name: @refinedev/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @refinedev/core

Core Imports

import { 
  Refine,
  useList,
  useOne,
  useCreate,
  useUpdate,
  useDelete,
  useForm,
  useTable,
  useNavigation
} from "@refinedev/core";

For CommonJS:

const { 
  Refine,
  useList,
  useOne,
  useCreate,
  useUpdate,
  useDelete,
  useForm,
  useTable,
  useNavigation
} = require("@refinedev/core");

Basic Usage

import React from "react";
import { Refine, useList, useCreate } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

// App setup with Refine wrapper
function App() {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "posts",
          list: "/posts",
          create: "/posts/create",
          edit: "/posts/edit/:id",
          show: "/posts/show/:id",
        },
      ]}
    >
      <PostsList />
    </Refine>
  );
}

// Component using Refine hooks
function PostsList() {
  const { data: posts, isLoading } = useList({
    resource: "posts",
    pagination: { pageSize: 10 }
  });
  
  const { mutate: createPost } = useCreate();
  
  const handleCreatePost = () => {
    createPost({
      resource: "posts",
      values: {
        title: "New Post",
        content: "Post content"
      }
    });
  };
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {posts?.data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Architecture

Refine Core is built around several key architectural components:

  • Provider System: Pluggable providers for data, authentication, routing, notifications, and access control
  • Hook-Based API: React hooks for all operations, ensuring proper React integration and state management
  • Resource-Centric: Operations are organized around resources (entities) with automatic routing and parameter inference
  • Type Safety: Full TypeScript support with generic types for data structures and operations
  • Query Management: Built on React Query for advanced caching, synchronization, and background updates
  • Headless UI: Core provides logic and state management while being UI framework agnostic

Capabilities

Application Setup & Core Components

Main application wrapper and foundational components for setting up Refine applications with providers and resource configuration.

interface RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider> {
  dataProvider: TDataProvider | Record<string, TDataProvider>;
  authProvider?: TAuthProvider;
  routerProvider?: TRouterProvider;
  notificationProvider?: TNotificationProvider;
  accessControlProvider?: TAccessControlProvider;
  i18nProvider?: TI18nProvider;
  liveProvider?: TLiveProvider;
  auditLogProvider?: TAuditLogProvider;
  resources?: ResourceProps[];
  options?: RefineOptions;
  children?: React.ReactNode;
}

function Refine<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>(
  props: RefineProps<TAuthProvider, TDataProvider, TRouterProvider, TNotificationProvider, TAccessControlProvider, TI18nProvider, TLiveProvider, TAuditLogProvider>
): JSX.Element;

Application Setup & Core Components

Data Operations & CRUD Hooks

Comprehensive data management hooks for CRUD operations, custom queries, and real-time data synchronization with built-in caching and state management.

function useList<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params?: UseListConfig<TQueryFnData, TError, TData>
): UseListReturnType<TData, TError>;

function useOne<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params: UseOneConfig<TQueryFnData, TError, TData>
): UseOneReturnType<TData, TError>;

function useCreate<TData = BaseRecord, TError = HttpError, TVariables = {}>(
  params?: UseCreateConfig<TData, TError, TVariables>
): UseCreateReturnType<TData, TError, TVariables>;

function useUpdate<TData = BaseRecord, TError = HttpError, TVariables = {}>(
  params?: UseUpdateConfig<TData, TError, TVariables>
): UseUpdateReturnType<TData, TError, TVariables>;

function useDelete<TData = BaseRecord, TError = HttpError>(
  params?: UseDeleteConfig<TData, TError>
): UseDeleteReturnType<TData, TError>;

Data Operations & CRUD Hooks

Authentication & Authorization

Complete authentication system with login, logout, registration flows, and fine-grained access control for resources and actions.

function useLogin<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLoginConfig<TData, TError, TVariables>
): UseLoginReturnType<TData, TError, TVariables>;

function useLogout<TData = {}, TError = {}, TVariables = {}>(
  params?: UseLogoutConfig<TData, TError, TVariables>
): UseLogoutReturnType<TData, TError, TVariables>;

function useIsAuthenticated<TData = {}>(
  params?: UseIsAuthenticatedConfig<TData>
): UseIsAuthenticatedReturnType<TData>;

function useCan(params: UseCanConfig): UseCanReturnType;

Authentication & Authorization

Navigation & Routing

Programmatic navigation, route parsing, and URL generation with resource-aware navigation utilities for CRUD operations.

function useNavigation(): UseNavigationReturnType;

function useGo(): Go;

function useParsed(): ParsedParams;

interface UseNavigationReturnType {
  list: (resource: string, type?: HistoryType, meta?: Record<string, unknown>) => void;
  create: (resource: string, type?: HistoryType, meta?: Record<string, unknown>) => void;
  edit: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  show: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  clone: (resource: string, id: BaseKey, type?: HistoryType, meta?: Record<string, unknown>) => void;
  listUrl: (resource: string, meta?: Record<string, unknown>) => string;
  createUrl: (resource: string, meta?: Record<string, unknown>) => string;
  editUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
  showUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
  cloneUrl: (resource: string, id: BaseKey, meta?: Record<string, unknown>) => string;
}

Navigation & Routing

Forms & Data Input

Advanced form management with auto-save, validation, mutation handling, and integration with popular form libraries.

function useForm<TQueryFnData = BaseRecord, TError = HttpError, TVariables = {}, TData = TQueryFnData, TResponse = BaseRecord, TResponseError = HttpError>(
  params?: UseFormConfig<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>
): UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;

Forms & Data Input

Tables & Lists

Comprehensive table functionality with sorting, filtering, pagination, search, and URL synchronization for data-heavy interfaces.

function useTable<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params?: UseTableConfig<TQueryFnData, TError, TData>
): UseTableReturnType<TData, TError>;

function useSelect<TQueryFnData = BaseRecord, TError = HttpError, TData = TQueryFnData>(
  params: UseSelectConfig<TQueryFnData, TError, TData>
): UseSelectReturnType<TData, TError>;

Tables & Lists

Utilities & Helpers

Resource management, loading states, metadata handling, notifications, and various utility functions for enhanced development experience.

function useResourceParams(params?: UseResourceParamsConfig): UseResourceParamsReturnType;

function useLoadingOvertime(params: UseLoadingOvertimeConfig): UseLoadingOvertimeReturnType;

function useNotification(): UseNotificationReturnType;

function useModal(): UseModalReturnType;

function usePublish(): ((event: LiveEvent) => void) | undefined;

function useSubscription(params: UseSubscriptionConfig): void;

function useLiveMode(): UseLiveModeReturnType;

function useMenu(params?: UseMenuConfig): UseMenuReturnType;

Utilities & Helpers

Types

type BaseKey = string | number;

interface BaseRecord {
  id?: BaseKey;
  [key: string]: any;
}

interface HttpError {
  message: string;
  statusCode: number;
  errors?: ValidationErrors;
}

interface Pagination {
  current?: number;
  pageSize?: number;
  mode?: "server" | "client" | "off";
}

type CrudOperators = 
  | "eq" | "ne" | "lt" | "gt" | "lte" | "gte"
  | "in" | "nin" | "ina" | "nina" | "contains" | "ncontains"
  | "containss" | "ncontainss" | "null" | "nnull"
  | "between" | "nbetween" | "startswith" | "nstartswith"
  | "startswiths" | "nstartswiths" | "endswith" | "nendswith"
  | "endswiths" | "nendswiths" | "or" | "and";

interface CrudFilter {
  field: string;
  operator: CrudOperators;
  value: any;
}

type CrudFilters = CrudFilter[];

type SortOrder = "asc" | "desc";

interface CrudSort {
  field: string;
  order: SortOrder;
}

type CrudSorting = CrudSort[];

interface GetListResponse<TData = BaseRecord> {
  data: TData[];
  total: number;
}

interface GetOneResponse<TData = BaseRecord> {
  data: TData;
}

interface CreateResponse<TData = BaseRecord> {
  data: TData;
}

interface UpdateResponse<TData = BaseRecord> {
  data: TData;
}

interface DeleteOneResponse<TData = BaseRecord> {
  data: TData;
}