Introduction

Frappe React SDK

React hooks library for a Frappe Framework (opens in a new tab) backend.

⚠️

This documentation is still a work-in-progress, and hence some information might be outdated or unavailable. We are working on it. 💪🏻
The SDK is well documented in the codebase with JSDocs, hence you should be able to read the documentation inside your code editor while using it.

What is Frappe React SDK?

Simply put, this library is a collection of hooks that allows developers to build React apps with a Frappe framework backend.

It encapsulates logic for data fetching - including things like loading states, revalidation, progress indicators and debouncing in hooks. In most cases, you would only need to write a single line of code to implement complex logic.

Features

The library currently supports the following features:

  • 🔐 Authentication - login with username and password (cookie based) + token based authentication, logout and maintain user state
  • 🗄 Database - Hooks to get document, get list of documents, get count, create, update and delete documents
  • 📄 File upload - Hook to upload a file to the Frappe filesystem. Maintains loading, progress and error states.
  • 🤙🏻 API calls - Hooks to make API calls to your whitelisted backend functions and maintain state
  • 🔍 Search - Hook to search documents in your database (with debouncing ✨)

The library uses frappe-js-sdk (opens in a new tab) and SWR (opens in a new tab) under the hood to make API calls to your Frappe backend.

frappe-js-sdk

Internally, we use frappe-js-sdk, another library that we maintain, to make calls to the Frappe backend. frappe-js-sdk is a npm package that can be used with any Javascript framework. it uses Axios under the hood to make API calls. frappe-react-sdk is just a wrapper around frappe-js-sdk.

SWR

SWR uses a cache invalidation strategy and also updates the data constantly and automatically (in the background). This allows the UI to always be fast and reactive. The hooks in the library use the default configuration for useSWR but you will be able to pass in your configuration of useSWR to all hooks in this library. Please refer to the useSWR API Options (opens in a new tab)

Showcase

We at The Commit Company (opens in a new tab) use and maintain this library for all our projects with Frappe and React. Our open-source work messaging tool Raven (opens in a new tab) also uses this SDK.

Setup