Algolia Search integration with 8base and Gatsby

I’m integrating Algolia search on my Gatsby site. I would like Algolia to search for information stored in the 8base database. What is the best way to pass the searchable data into Algolia?
Is there an API or plugin for this?

Hello Anya,

Glad to see you again!
I have been jumping on that issue right away, and I will let you know as soon as possible.

Lada Kokotova | Technical Support Engineer

Hello!

Well, you can use triggers ‘after’ to synchronize indexes

// 8base.yml

    function:
      helloTrigger:
        handler:
          code: src/triggerAfter.ts
        type: trigger.after
        operation: User.create

// src/triggerAfter.ts

   export default async (
      event: FunctionEvent<EventData>,
      ctx: FunctionContext,
    ): Promise<void> => {
      const client = algoliasearch('YourApplicationID', 'YourAdminAPIKey');
      const algoliaIndex = client.initIndex('user_index');
      await algoliaIndex.saveObject(event.data);
      return event;
    }

Lada Kokotoca | Technical Support Engineer

Why do you want to use Algolia, and 8base at the same time?

It seems that you can use one of those 2.

1 Like

@alacret
I have two websites, Magento and Gatsby, and I’m hoping to use multiple indexes in Algolia to combine the search results from both sites on Gatsby.

My understanding is that Algolia is optimized for search speed, and separating the search database would increase the website performance…

Is there a better way to approach it?

I’m guessing that in the Gatsby website you manage data from 8base, correct?

If the volume is very large, then Algolia is a good solution. Otherwise, you can combine them in 8base and do the search there for simplicity. 8base translates your graphql to SQL, so searches are pretty efficient. How many records are we talking about?

Also, is your search on Gatsby dynamic? or you are just generating lots of static pages?

@ alacret

Yes, I am using Gatsby site to manage data from 8base. There are also a few static pages, but most of the content will be coming from 8base.
Currently, the website doesn’t have a lot of data, but I hope to grow it. So, let’s say it reaches 10,000 records at some point.

I have a default site-wide search through Carbon Design System theme. I don’t know if it’s dynamic: how do I check?

@lada.kokotova
Lada, I tested the script, but it didn’t submit the data to Algolia. I’m guessing it may require an index ID, to post the data to a corresponding Algolia index?

I’m also getting errors (see attached). They are related to const client = algoliasearch: “Cannot find name ‘algoliasearch’.ts(2304)”
16%20PM

04%20PM

Hello Anya!

I’ve sent your issue to our developer. He’ll answer you soon.

Lada Kokotova | Technical Support Engineer

Thank you! I have one more question:
Some data posts will require moderation: they will be manually reviewed and approved before they can be added to the search.
In this case, would it be better to API data directly from 8base tables? Is there a way to do that?
or, is there a cron job I can run to download JSON file and upload it to Algolia?

OK, I’ve got your problem. We’ll give you a full answer (with the previous question) a little bit later.

Lada Kokotova | Technical Support Engineer

Hello Anya!

It’s not a complete example - we showed only the main concept.

If you need to use Algolia - the first is to install the client as a dependency
npm install algoliasearch
All docs install and init client you can find here.

About the second question - you can add boolean flag like isModerated , and select items for indexing with filter isModerated: { equals : true }

Lada Kokotova | Technical Support Engineer

Hi Lada,

Thank you for the suggestion! I have additional questions:

  1. I installed the client, but the data still doesn’t go through. Here are the errors:
    Cannot find name ‘FunctionEvent’.ts(2304)
    Cannot find name ‘EventData’.ts(2304)
    Property ‘saveObject’ does not exist on type ‘SearchIndex’.ts(2339)

Am I missing any customization?

  1. If the user updates the record in 8base, can it be updated in Algolia? I want to avoid creating new (duplicate) records for the updated data.

Thank you,
Anya

Anytime!

I’ll give you a full response as soon as possible. Sorry about the wait.

Lada Kokotova | Technical Support Engineer

Hello!

About first two errors - you need import these types form 8base-cli-types (and also install them as dependency)
import { FunctionContext, FunctionEvent } from '8base-cli-types';

About a third - I check this example, here all works as expected (don’t forget to install all dependencies)

import { FunctionContext, FunctionEvent } from '8base-cli-types';
import algoliasearch from 'algoliasearch';

type EventData = {
  something: string;
};

export default async (event: FunctionEvent<EventData>, ctx: FunctionContext): Promise<void> => {
  const client = algoliasearch('YourApplicationID', 'YourAdminAPIKey');

  const algoliaIndex = client.initIndex('user_index');
  await algoliaIndex.saveObject(event.data);
};

I also noticed that we’ve got a lot of common-developing issues and questions here which are not straight 8base platform-related (like ECMAScript syntax, basic web-project structure and TypeScript concepts, etc).
Don’t get us wrong - we don’t mind answering, but I am sure it will save a lot of yours and our time if you follow these recommendations before posting next time:

  • Review and try to debug your code after adding changes (including snippets you’re getting from the community).
  • Google the errors you’ve got, use https://stackoverflow.com/ - this will solve 99% of JS-related stuff.
  • If you have some troubles understanding the code - refreshing the basic concepts is useful sometimes

https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html Note that using TypeScript is not necessary. You can code and deploy your custom functions in JavaScript (just rename your hander from .ts to .js and use basic js syntax). You can generate a sample trigger in js by running 8base generate trigger jsTrigger -s js -t before in cli.

Lada Kokotova | Technical Support Engineer

8base will be extremely performant for 1,000,000’s of records! And you can add custom indexes to your tables to boost additional speed. I agree with Angel, in that you’ll be able to handle all of this in 8base and avoid the technical overhead. Otherwise, plugging in Angolia sounds like a fun challenge :slight_smile:

2 Likes

@sebastian.scholl

Thank you so much for your feedback!

I have two sites, Gatsby and Magento. I’m using 8base for storing the Gatsby data, and I’m trying to display recommended products from the Magento site for the Gatsby search queries. Since Algoila has a plugin for Magento and supports multiple indexes, I thought it would be an appropriate solution.
I’m open to your suggestions.

@lada.kokotova
I was able to remove the errors, but the data still doesn’t post.
Am I missing any customization? Do I need to reference the component where the form is located?

I’ll answer you as soon as possible.

Lada Kokotova | Technical Support Engineer

1 Like

Hello Anna!

I’m afraid we can’t help you much with debugging your code without building the project ourselves at this stage. The problem could be caused by multiple reasons by algolia API issues (client setup, index initializing), etc… Please add more logs to your function and try to debug it yourself, try to check index from algolia ui.

Lada Kokotova | Technical Support Engineer

Hey @sebastian.scholl. In the future, I’d like to implement website search and connect it to 8base. And 8Base is certainly rapid.

But wouldn’t specific functionality like real-time search just hammer the 8Base API (and therefore use a lot of queries!)? Even with debouncing? That’s why I had been leaning towards something like Algolia, but I’m not there yet.