# Calling your Gadget API from BigCommerce Catalyst storefronts 

Catalyst is BigCommerce's composable, fully customizable headless ecommerce storefront framework built on top of [Next.js](https://nextjs.org/).

You can install your Gadget app's API client into your [Catalyst storefront projects](https://www.catalyst.dev/docs) to read and write data from your Gadget app.

You cannot build or host Catalyst storefront projects in Gadget.

## Installing your API client 

To install your Gadget app's API client into a Catalyst project, you need to follow the installation instructions in your [app's API docs](https://docs.gadget.dev/api/example-app/development/external-api-calls/installing#node-module) and install the client in the `/core` directory.

```markdown

  pnpm install @gadget-client/example-app
  
```

Once your client is installed, you can create a `gadget.ts` file in your `core/` directory, and initialize your client:

```typescript

  import { ExampleAppClient } from "@gadget-client/@gadget-client/example-app";

  export const api = new ExampleAppClient();  
```

Now you can import `api` into your Catalyst project files and call your actions.

When you make a change to your model schema or actions in Gadget, you will need to re-install the `@latest` version of your API client into your Catalyst project.

## Calling your Gadget actions 

Because Catalyst is built with Next.js and the Next app router, the custom storefront will be server-side rendered. This means that data read using your Gadget API client can be done on the server, and favours the imperative API client calls instead of using the `@gadgetinc/react` hooks that are helpful when building SPAs (single-page applications).

For example, if you wanted to call a Gadget action to load data for a Catalyst product page:

1.  You can add a function to a `product/[slug]/page-data.ts` file that calls your Gadget action.

```typescript
import { api } from "../../../../../gadget";

// .. other imports
// .. other functions

export const loadCustomData = async () => {
  const customData = await api.myCustomAction();
  return customData;
};
```

2.  In the product page you can call the `loadCustomData` function to call the Gadget API:

```tsx
// .. imports

// .. data load + transform functions

export default async function Product({ params: { locale, slug }, searchParams }: Props) {
  // .. other data loading

  const customData = await loadCustomData();

  return (
    <>
      {/** other components */}

      <div className="lg:col-span-2">
        <b>{customData.foo}</b>
      </div>

      {/** other components */}
    </>
  );
}

export const runtime = "edge";
```

Using this configuration, data will be fetched from Gadget as part of the initial server-side request for the product page.

## Permissions 

When you use an API client installed in Catalyst to call your Gadget actions, the default [access control role](https://docs.gadget.dev/guides/access-control#roles) granted to requests will be `unauthenticated`. This is typically okay for requests made from the storefront, as most shoppers will be unauthenticated while browsing.

### Customer login 

If you are looking to provide logged-in shoppers an authenticated role with which to make requests to your Gadget backend, you will need to add custom code to support [customer login](https://www.catalyst.dev/docs/environment-variables#customer-login) in Catalyst, and manage token passing between your Catalyst storefront and your Gadget backend for all authenticated requests.