Skip to main content
Version: 3.x

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;
}

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
}

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.
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
};

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

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
};