Key Value Storage

Some extension need store simple data like token, url, etc. Key Value Storage is best for simple use.

You can easiliy use private database from component with extensionApi in Component Context.

import React from 'react';
import { Alert } from '@fowapps/fow-ui';
const Page = ({ ctx, extensionId }) => {
  const { extensionApi, hooks } = ctx; //You can access extensionApi
  const { useMutation, useDisclosure, useQuery } = hooks;

  return (
    <>
      <Alert description="This is awesome Page from extension"></Alert>
    </>
  );
};

export default Page;

Set Data

const saveMutation = useMutation(
  (body) =>
    extensionApi.setStorage(extensionId, {
      key1: 'value',
      key2: 'value2',
    }),
  {
    onSuccess: (res) => {
      //Save Successfuly
    },
    onError: () => {
      //Save Successfuly
    },
  },
);

Read Data

import React from 'react';
import { Alert } from '@fowapps/fow-ui';
const Page = ({ ctx, extensionId, storage }) => {
  //storage has a all keys and values.

  const { extensionApi, hooks } = ctx; //You can access extensionApi
  const { useMutation, useDisclosure, useQuery } = hooks;

  const token = storage.token;

  return (
    <>
      <Alert description="This is awesome Page from extension"></Alert>
    </>
  );
};

export default Page;

You can check all features about Key Value Storage, check this tutorial