WP Frappe Data StoreReactive Frappe Data for WordPress & React

Seamlessly integrate Frappe Framework & Frappe CRM DocTypes into @wordpress/data and React custom hooks.

Get Started

API Reference

@wordpress/data Powered

Leverages WordPress's Redux-based data management engine with caching, deduplication, and reactive resolution.

React Hooks

Direct access to useFrappeResourceList, useFrappeResource, and mutations with automatic re-renders.

DocType Schema Normalization

Inspects Frappe metadata (`DocType`) to provide normalized definitions for form inputs, placeholders, and labels.

Proxy & Multi-Auth Support

Supports session cookies, API key and secret headers, and WordPress REST API server-side proxy routes.

Why `@lubusin/wp-frappe-data-store`?

When building modern WordPress interfaces (DataViews, Gutenberg blocks, custom admin screens, or standalone SPA plugins) that need to communicate with Frappe Framework or Frappe CRM, managing state, caching, and async requests can become complex quickly.

@lubusin/wp-frappe-data-store bridges this gap by registering a standard @wordpress/data store (wpui-frappe/resources) and wrapping it in type-safe React hooks.

tsx

import { useFrappeResourceList } from '@lubusin/wp-frappe-data-store';

export function CRMDealsList() {
  const { records, isResolving, error } = useFrappeResourceList('CRM Deal', {
    fields: ['name', 'deal_name', 'status', 'deal_value'],
    limit_page_length: 20
  });

  if (isResolving && !records) return <p>Loading Deals...</p>;
  if (error) return <p>Error loading deals.</p>;

  return (
    <ul>
      {records?.map((deal) => (
        <li key={deal.name}>{deal.deal_name} (${deal.deal_value})</li>
      ))}
    </ul>
  );
}