Need help updating index for headless Shopify site

I’m using Algolia for products search on a headless Shopify website.
Since it’s a headless site (the client’s aren’t using the hosted Shopify site, there is no Online Store sales channel, and therefore the Algolia Shopify app doesn’t work to keep the products updated (see my other thread here).

The site is built with Next.js and hosted on Vercel, so I figured I could use the webhook feature of Shopify to trigger reindexing the products in Aloglia every time a product is updated, created or deleted by hitting an API route.

When I’m running the site locally, I can hit the endpoint and the products are reindex like I want, however it doesn’t seem to happen in production (either by hitting the endpoint in a browser, or the webhooks being fired in Shopify).

I have no idea why!

Here is the code for the API Route:

import { getAllProductsForAlgolia } from '@lib/get-all-products-for-algolia';
import algoliasearch from 'algoliasearch';
import { NextApiRequest, NextApiResponse } from 'next';

const {
  NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
  ALGOLIA_WRITE_API_KEY,
} = process.env;

interface Product {
  objectID: string;
  handle: string;
  description: string;
  title: string;
  tags: string[];
  productType: string;
  availableForSale: boolean;
  totalInventory: number;
  image: {
    id: string;
    originalSrc: string;
    altText?: string;
  };
}

type Products = Product[];

export default async function handler(
  _req: NextApiRequest,
  res: NextApiResponse
) {
  const client = algoliasearch(
    NEXT_PUBLIC_ALGOLIA_APPLICATION_ID,
    ALGOLIA_WRITE_API_KEY
  );

  const products: Products = await getAllProductsForAlgolia();

  const index = client.initIndex('all_shopify_products');

  index
    .partialUpdateObjects(products, { createIfNotExists: true })
    // eslint-disable-next-line no-console
    .then(({ objectIDs }) => console.log(objectIDs))
    // eslint-disable-next-line no-console
    .catch((error) =>
      error.status(405).json({
        message: `Error:
        ${String(error)}`,
      })
    );
  return res.status(200).json({
    message: `Success:
    NEXT_PUBLIC_ALGOLIA_APPLICATION_ID: ${typeof NEXT_PUBLIC_ALGOLIA_APPLICATION_ID}
    ALGOLIA_WRITE_API_KEY: ${typeof ALGOLIA_WRITE_API_KEY}`,
  });
}

If anyone knows what I’m doing wrong here, or has built something similar and would be willing to show me some of the code, I’d be super grateful :pray:

Hi @services1 If you are able to do it on your localhost hold then it is possible that you are having a CORS issue with API Route.

Have you configured CORS correctly?

Ahhh interesting. It could be that. I haven’t seen anything in the docs about configuring CORS (I’m using the JavaScript API client).

Do you have a link @harshmaur?

I do not think the problem is coming from algolia because algolia is authenticating through the API Keys.
The problem I feel is in the nextjs server. Which by default only accepts same origin as cors.

Check caveats on the API Routing of next js API Routes: Introduction | Next.js

Gotcha. yeah makes sense. I bet you’re right. Will have a look into it.
Thanks!

@services1 did it work?

Hi @harshmaur,
I haven’t had a chance to get back to this project this week.
I will try on Monday and let you know. Thanks for your help so far :blush: