GithubHelp home page GithubHelp logo

lozlow / figbird Goto Github PK

View Code? Open in Web Editor NEW

This project forked from humaans/figbird

0.0 1.0 0.0 3.45 MB

Effortless realtime data management for React + Feathers applications

Home Page: https://humaans.github.io/figbird/

License: MIT License

JavaScript 100.00%

figbird's Introduction

Figbird

Effortless realtime data management for React + Feathers applications. Used in Humaans.

Features

Idiomatic React Hooks

Fetch some data with const { data } = useFind('notes') and your components will rerender in realtime as the data changes upstream. Modify the data using the const { patch } = useMutation('notes') and the upates will be instantly propagated to all components referencing the same objects.

  • useGet
  • useFind
  • useMutation

Live Queries

Works with Feathers realtime events and with local data mutations. Once a record is created/modified/removed all queries referencing this record get updated. For example, if your data is fetched using useFind('notes', { query: { tag: 'ideas' } }) and you then patch some note with patch({ tag: 'ideas' }) - the query will updated immediately and rerender all components referencing that query. Adjust behaviour per query:

  • merge - merge realtime events into cached queries as they come (default)
  • refetch - refetch data for this query from the server when a realtime event is received
  • disabled - ignore realtime events for this query

Fetch policies

Fetch policies allow you to fine tune Figbird to your requirements. With the default swr (stale-while-revalidate) Figbir's uses cached data when possible for maximum responsiveness, but refetches in the background on mount to make sure data is up to date. The other policies are cache-first which will use cache and not refresh from the server (compatible with realtime)

  • swr - show cached data if possible and refetch in the background (default)
  • cache-first - show cached data if possible and avoid fetching if data is there
  • network-only - always refetch data on mount

Cache eviction

The usage of useGet and useFind hooks gets reference counted so that Figbird knows exactly if any of the queries are still being referenced by the UI. By default, Figbird will keep all the data and cache without ever evicting, but if your application demands it, you can strategically implement cache eviction hooks (e.g. on page navigation) to clear out all unused cache items or specific items based on service name or data attributes. (Note: yet to be implemnted)

  • manual - cache all queries in memory forever, evict manually (default)
  • unmount - remove cached query data on unmount (if no component is referencing that particular cached data anymore)
  • delayed - remove unused cached data after some time

Logging

Figbird's cache is implemented using the tiny-atom store which comes with a powerful logger. Observe and inspect all the changes to your cache with ease.

Install

$ npm install figbird

API Reference

Visit the documentation site for full API reference.

Roadmap

  • useGet
  • useFind
  • useMutations
  • useFeathers
  • refetch for manual data refetching
  • reuse inflight requests for identical get/find requests
  • support React Suspense and Concurrent Mode

Options

  • option - custom id field
  • option - custom updatedAt field
  • option - logger
  • global realtime option
  • global fetchPolicy option
  • global cacheEviction option

Cache

  • cache all results and queries
  • live update queries on entity updates
  • realtime mode merge that merges updates into cached entities and query
  • realtime mode refetch that keeps stale data, but refetches from server, useful for complex queries
  • realtime mode disabled to disable realtime updates
  • fetch policy swr (aka, stale-while-revalidate, show cached data, but refetch, the default)
  • fetch policy cache-first
  • fetch policy network-only
  • cache eviction manual
  • cache eviction unmount
  • cache eviction delayed
  • cache eviction ttl ttl
  • useCacheEviction - sweep through cache and remove any queries or entities, e.g. clean('notes')
  • ref counting - do not remove entities/queries if they're actively used

Pagination

  • useFind - pagination metadata
  • useFind - handle updates to paginated queries
  • useFind - allPages to fetch all pages
  • useFind - fetchMore
  • support find without pagination envelope
  • support find with custom pagination envelope

Bugs

  • bug: unmounting should not stop listening if other components need to

figbird's People

Contributors

kidkarolis avatar kwanman avatar joeinnes avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.