• This feature is currently in beta and is subject to change.
  • This is currently only compatible with setDocuments method.
  • Ensure that the data providers are set prior to calling identify method.

​
Overview

Velt supports self-hosting your reactions and related data:

  • Reactions can be stored on your own infrastructure, with only necessary identifiers on Velt servers.
  • Velt Components automatically hydrate reaction data in the frontend by fetching from your configured data provider.
  • This gives you full control over reaction data while maintaining all Velt collaboration features.
  • This automatically also ensures that the in-app notifications content related to reactions is not stored on Velt servers. The content is generated using the reactions data in the frontend.

​
How does it work?

  • When reactions are created, updated, deleted or requested, the SDK uses your configured ReactionAnnotationDataProvider to handle storage and retrieval
  • The data provider implements get, save, and delete methods to interact with your database
  • Velt handles the data mapping and realtime synchronization while delegating persistence of actual content to your infrastructure
  • For write requests (save, delete), the operation is first performed on your database and only if we get a success response, the SDK will perform the operation on the Velt server. If the operation fails on your database, the SDK will not perform the operation on the Velt server.
  • You can configure retries, timeouts, etc. for the data provider.

Here are the methods that you need to implement on the data provider:

​
get

Method to fetch reactions from your database. On error we will retry.

​
save

Save reactions to your database. Return a success or error response. On error we will retry.

​
delete

Delete reactions from your database. Return a success or error response. On error we will retry.

​
config

Configuration for the reaction data provider.

​
Example Implementation

const fetchReactionsFromDB = async (request: GetReactionResolverRequest) => {
    // Fetch reaction annotations from your DB
    const result = await __getReactionsFromYourDB__(request)
      .then((response) => {
        return { data: response, success: true, statusCode: 200 };
      })
      .catch((error) => {
        return { success: false, statusCode: 500 };
      });

    return result;
};

const saveReactionsToDB = async (request: SaveReactionResolverRequest) => {
    const result = await __saveReactionsToYourDB__(request)
      .then((response) => {
        return { success: true, statusCode: 200 };
      })
      .catch((error) => {
        return { success: false, statusCode: 500 };
    });
    return result;
};

const deleteReactionsFromDB = async (request: DeleteReactionResolverRequest) => {
    const result = await __deleteReactionsFromYourDB__(request)
      .then((response) => {
        return { success: true, statusCode: 200 };
      })
      .catch((error) => {
        return { success: false, statusCode: 500 };
    });
    return result;
};

const reactionResolverConfig: ResolverConfig = {
    resolveTimeout: 2000,
    saveRetryConfig: {
        retryCount: 3,
        retryDelay: 2000
    },
    deleteRetryConfig: {
        retryCount: 3,
        retryDelay: 2000
    }
};


const reactionAnnotationDataProvider: ReactionAnnotationDataProvider = {
    get: fetchReactionsFromDB,
    save: saveReactionsToDB,
    delete: deleteReactionsFromDB,
    config: reactionResolverConfig
};

<VeltProvider 
    apiKey='YOUR_API_KEY'
    dataProviders={{
        reaction: reactionAnnotationDataProvider
    }}
>
</VeltProvider>

Was this page helpful?