FrontCommerceApp

The FrontCommerceApp instance uses the frontCommerce context to expose different API's which can be used in your Application.

To use the FrontCommerceApp instance you can add it to your loaders or actions.

import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";

export const loader = ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  // your loader logic here
};

export const action = ({ context }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  // your action logic here
};

API Reference

app.user

Exposes the current user information.

interface User {
  clientIp: string;
  session: SessionAdapter;
  contributionMode: ContributionMode;
}

SessionAdapter

See code reference for more details.

interface SessionAdapter {
  getSessionData(): Record<string, any>; // used to retrieve the session data
  commit(): Promise<void>; // used to commit the session cookie
  setFlashValue<T = any>(key: string, value: T): void; // used to set a flash value
  getFlashValue<T = any>(key: string): T | undefined; // used to get a flash value
}

ContributionMode

See code reference for more details.

interface ContributionMode {
  current(): ContributionModeState; // returns the current contribution mode state
  enabled: boolean; // returns `true` if contribution mode is enabled
  previewEnabled: boolean; // returns `true` if contribution mode and preview mode are enabled
  xRayEnabled: boolean; // returns `true` if contribution mode and xRay mode are enabled
  setContributionMode(options: ContributionModeState): void; // sets the contribution mode state
  setPreviewMode(isEnabled: boolean): boolean; // sets the preview mode state if contribution mode is enabled
  setXRayMode(isEnabled: boolean): boolean; // sets the xRay mode state if contribution mode is enabled
}

type ContributionModeState = {
  enabled: boolean;
  previewEnabled: boolean;
  xRayEnabled: boolean;
};

app.env

Exposes the current environment information. If the FRONT_COMMERCE_ENV has been set, it will use that, otherwise fallback to process.env.NODE_ENV.

type Environment = "production" | "development" | "test";

app.request

Exposes the Remix NodeRequest request.

This is essentially the same request which you will find in your loader or action functions.

app.graphql

Exposes the graphql client.

• query - Executes a graphql query.
• mutate - Executes a graphql mutation.

Remix Loader

import { LoaderFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";

export const loader = ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const result = app.graphql.query(/* GraphQL */ `
    query {
      products {
        items {
          id
          name
        }
      }
    }
  `);

  // your loader logic here
};

Remix Action

import { ActionFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";

export const action = ({ context }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const result = app.graphql.mutate(
    /* GraphQL */ `
      mutation AddToCart($input: AddToCartInput!)) {
        addToCart(input: $input) {
          cart {
            items {
              id
              name
            }
          }
        }
      }
    `,
    { sku: "123", quantity: 1 }
  );

  // your action logic here
};

app.config

Exposes the configurations from the ConfigProviders, see Add a configuration provider for more information.

import { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";

export const loader = ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const currentShopId = app.config.currentShopId;

  // your loader logic here
};

export const action = ({ context }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const currentShopId = app.config.currentShopId;

  // your action logic here
};

app.services

Exposes the server services

Remix Loader

import { LoaderFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";

export const loader = ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const services = app.services;

  // your loader logic here
};

Remix Action

import { ActionFunctionArgs } from "@remix-run/node";
import { FrontCommerceApp } from "@front-commerce/remix";

export const action = ({ context }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);

  const services = app.services;

  // your action logic here
};