Add Algolia enhancer
Before your front-end application can interpret the Algolia parameter values returned from Canvas, you must complete this one-time activation of Algolia enhancers into your app.
If you aren't familiar with the concept of enhancers, please check out this section about enhancers. To start with a pre-configured Next.js app already wired up to an Algolia enhancer, please use the following example:
Add enhancer to your app#
Add the following npm packages to your front-end application:
npm install @uniformdev/canvas npm install @uniformdev/canvas-algoliaIn a text editor, open the file where you retrieve the composition definition from Uniform.
You are looking for the code calls the async function
getComposition
. The code below assumes the object returned is set in a variablecomposition
.Add the following import statements:
// general enhancer plumbing import { EnhancerBuilder, enhance } from '@uniformdev/canvas'; // Algolia specific imports import { createEnhancer, ALGOLIA_PARAMETER_TYPES, AlgoliaClient, } from '@uniformdev/canvas-algolia';Add the following code:
const algoliaClient = new AlgoliaClient({ applicationId: process.env.ALGOLIA_APPLICATION_ID, searchKey: process.env.ALGOLIA_API_KEY, });About this step
We recommend moving the Algolia credentials to environment variables rather than hard coding them in the front-end app.
Add the following code:
const algoliaEnhancer = createEnhancer({ clients: algoliaClient });Add the following code before your return your composition:
await enhance({ composition, enhancers: new EnhancerBuilder().parameterType(ALGOLIA_PARAMETER_TYPES, algoliaEnhancer), context: {}, });
Success!
That's it! Your app is able to enhance both Algolia parameter values and return real data from the Algolia index. Your components now should receive the expected data from Algolia.