Accessing current shop configuration

From the Client (Public)

The current shop configuration can be accessed from the client using the public configuration.

note

The public shop configuration (config.public.shop) is a subset of the private shop configuration (config.shop).

This will only contain information that can be exposed to the client.

React Hook

To learn more see usePublicConfig documentation.

import { usePublicConfig } from "@front-commerce/core/react";

const MyComponent = () => {
  const { shop } = usePublicConfig();

  return (
    <div>
      <h1>{shop.id}</h1>
      <p>{shop.locale}</p>
    </div>
  );
};

Utility Function

To learn more see getPublicConfig documentation.

import { getPublicConfig } from "@front-commerce/core/react";

const myFunction = () => {
  const publicConfig = getPublicConfig();

  return {
    id: publicConfig.shop.id,
    locale: publicConfig.shop.locale,
  };
};

From the Server (Private)

The current shop configuration can be accessed from the client using the app configuration.

note

The private shop configuration (config.shop) is a superset of the public shop configuration (config.public.shop).

This can contain additional information that should not be exposed to the client.

Remix Loader

import type { LoaderFunctionArgs } from "@remix-run/node";

export const loader = async ({ context }: LoaderFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  const currentShopConfig = app.config.shop;
  // ...
};

Remix Action

import type { ActionFunctionArgs } from "@remix-run/node";

export const action = async ({ context }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  const currentShopConfig = app.config.shop;
  // ...
};

GraphQL Resolver

export default {
  Query: {
    myQuery: async (parent, args, context, info) => {
      const currentShopConfig = context.config.shop;
      // ...
    },
  },
};