parse-server-hooks v0.1.4

Parse server hooks

React hooks for parse-server

Installation

yarn add parse-server-hooks

Initialization

You need to define Parse as a global variable and initialize it before using hooks.

// React
import Parse from 'parse';
// React native
import Parse from 'parse/react-native.js';
Parse.setAsyncStorage(AsyncStorage);

global.Parse = Parse;

Parse.serverURL = serverURL;
Parse.initialize(applicationId, javascriptKey);

Hooks

useParseQuery

This hook return data of a ParseQuery and can enable liveQuery and rerender on each event.

const query = new Parse.Query(MyClass);

// In react component
const [data, { loading }] = useParseQuery({
  query,
  // Optionnal
  enableLiveQuery: true,
  onOpen,
  onUpdate,
  onDelete,
});

// Optionnal :
const mapData = (element: MyClass): MyFrontData => ({
  id: element.id,
  name: element.name,
});

const onOpen = ({ initialize }) => {
  const data = await query.findAll();
  initialize(data.map(mapData));
};

const onUpdate = (element: MyClass, { set }) => {
  set(mapData(element));
};

const onDelete = (element: MyClass, { remove }) => {
  remove(element.id);
};

You can use onOpen, onUpdate and onDelete to customize your data mapping on each events.