@harlem/plugin-transaction

The official transaction plugin for Harlem

Usage no npm install needed!

<script type="module">
  import harlemPluginTransaction from 'https://cdn.skypack.dev/@harlem/plugin-transaction';
</script>

README

Harlem

Harlem Transaction Plugin

npm

This is the official Harlem plugin for adding transactions to your stores. This plugin works similar to a SQL Database transaction in that if an error occurs during the transaction, all mutations that have taken place will be rolled-back.

This is particularly useful for updating state in multiple stores or multiple branches in the same store at the same time.

Getting started

Before installing the transaction plugin make sure you have installed @harlem/core.

  1. Install @harlem/plugin-transaction:
npm install @harlem/plugin-transaction

Or if you're using Yarn:

yarn add @harlem/plugin-transaction
  1. Create an instance of the plugin and register it with Harlem:
import App from './app.vue';

import harlem from '@harlem/core';
import createTransactionPlugin from '@harlem/plugin-transaction';

createApp(App)
    .use(harlem, {
        plugins: [
            createTransactionPlugin()
        ]
    })
    .mount('#app');
  1. Define a transaction that utilises multiple mutations:
import {
    transaction
} from '@harlem/plugin-transaction';

import {
    setUserDetails,
    setUserPermissions
} from './mutations';

import {
    getUserDetails,
    getUserPermissions
} from './services';

/*
The setUserPermissions has an error in it causing
the transaction to fail in which case the user details
mutation will be rolled back.
*/
const setUserData = transaction('setUserData', payload => {
    const {
        details,
        permissions
    } = payload;

    setUserDetails(details);
    setUserPermissions(permissions);
});

/*
Here is an example action that loads some data
about a user and updates the store
*/
export async function loadUserData(userId) {
    const [
        details,
        permissions
    ] = await Promise.all([
        getUserDetails(userId),
        getUserPermissions(userId),
    ]);

    setUserData({
        details,
        permissions
    });
}