Occtoo is an Experience Data Platform designed to accelerate the way companies create meaningful customer experiences across various touchpoints. Our platform is tailored to assist digital officers, marketers, and developers in transitioning to a new paradigm where they can dedicate less time to data integration and more time to unleashing their creative potential with data.

An Occtoo Destination offers one or more endpoints that allow you to query specific subsets of your data. It also encompasses facets and various mechanisms for fine-tuning queries by leveraging them.

For more in-depth information about how to query a destination, please refer to the destination docs.

First, put your Occtoo Destination values in a .env file:

OCCTOO_DESTINATION_ID=...
OCCTOO_DESTINATION_URL=...

For demo purposes, you can use the following URL as OCCTOO_DESTINATION_URL:

https://global.occtoo.com/occtoodemo/occtooFrontEndDocumentation/v3

Then, install the package:

npm install @occtoo/destination-client

Lastly, import the DestinationClient class to create a new destination client and use it to query your destination endpoints. Using a RSC in Next.js, for example:

import Image from "next/image";

// import the destination client
import { DestinationClient } from "@occtoo/destination-client";

const getProducts = async () => {
  // create a new destination client
  const destinationClient = new DestinationClient();

  // fetch data from destination
  const destinationResponse = await destinationClient.post("/products", {
    filter: [
      {
        must: {
          category: ["Pants"],
        },
      },
    ],
    sortAsc: ["id"],
    skip: 0,
    top: 14,
  });

  return destinationResponse;
};

export default async function ProductsComponent() {
  const products = await getProducts();

  return (
    <div className="container flex flex-row flex-wrap">
      {products.results?.map((product) => (
        <div
          key={product.id}
          className="flex flex-col items-center justify-center w-[200px] shrink-0 h-[250px] border"
        >
          <div className="flex items-center justify-center h-full">
            {product.urls?.length && (
              <Image
                src={product.urls.split('|')[0] + "?format=small"}
                alt={product.id || "product"}
                height={100}
                width={100}
              />
            )}
          </div>
          <div className="mt-auto py-4 font-medium text-sm">{product.name}</div>
        </div>
      ))}
    </div>
  );
}

If you are using a protected destination, you can pass client credentials to the DestinationClient. Credentials can be generated in the Occtoo Studio.

Note: If you are using an unprotected (public) destination, you can skip these steps.

const destinationClient = new DestinationClient({
  credentials: {
    clientId: process.env.DESTINATION_APP_ID,
    clientSecret: process.env.DESTINATION_APP_SECRET,
  },
});

Then call the authenticate method to authenticate the client before making any requests:

await destinationClient.authenticate();

Note: Authentication is only permitted server-side. Tokens and credentials should be stored securely and not exposed to unauthorized clients.

You can also pass an access token directly to the client (returned by the authenticate method):

const destinationClient = new DestinationClient({
  headers: {
    Authorization: "Bearer <access_token>",
  },
});

npx @occtoo/destination-client generate

Links

• Occtoo docs
• Occtoo website