npm package: @occtoo/destination-client
Description: <p align="center">   <picture>   <source media="(prefers-color-scheme: dark)" srcset="https://6519008.fs1.hubspotusercontent-na1.net/hub/6519008/hubfs/Logo-Occtoo-white.png?width=200&height=80&name=Logo-Occtoo-white.png">   <img src="https://www.occtoo.co
Latest version: 1.0.1

<p align="center">
  <picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://6519008.fs1.hubspotusercontent-na1.net/hub/6519008/hubfs/Logo-Occtoo-white.png?width=200&height=80&name=Logo-Occtoo-white.png">
  <img src="https://www.occtoo.com/hs-fs/hubfs/Logo-Occtoo-dark.png?width=200&height=80&name=Logo-Occtoo-dark.png" width="200" alt="Occtoo Logo">
</picture>
</p>

<h1 align="center">
  @occtoo/destination-client
</h1>

<p align="center">
  Generate a fully typed client for your <a rel="noopener noreferrer" target="_blank" href="https://www.occtoo.com">Occtoo</a> Destination API.
</p>

<h2 id="about">Occtoo</h2>

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](https://docs.occtoo.com/docs/get-started/call-custom-destination/).

<h2 id="getting-started">Getting started</h2>

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

```bash
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:

```bash
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:

```javascript
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>
  );
}
```

<h2 id="authentication">Authentication</h2>

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.

```javascript
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:

```javascript
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):

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

<h2 id="generate">Regenerate the client</h2>
If your destination has been updated and you want to regenerate the client, you can update the client by updating your `.env` file and running the following command:

```bash
npx @occtoo/destination-client generate
```

#### Links

- [Occtoo docs](https://docs.occtoo.com/)
- [Occtoo website](https://www.occtoo.com/)