Skip to main content
Version: 3.x

@front-commerce/remix

This package contains Front-Commerce implementations related to Remix.

Installation​

First ensure you have installed the package:

$ pnpm install @front-commerce/remix@latest

Type Safety​

You can get type safety over the network for your loaders with LoaderFunctionArgs and for your actions with ActionFunctionArgs.

To ensure that the typed frontCommerce context is in the arguments, you can add the @front-commerce/remix reference to your remix.env.d.ts file.

remix.env.d.ts
/// <reference types="@remix-run/dev" />
/// <reference types="@remix-run/node" />
/// <reference types="@front-commerce/remix" />

Front-Commerce Context​

To ensure the Front-Commerce Context is available in your loaders and actions, you need to add the createFrontCommerceContext to your server via the getLoadContext, to do this, update your server.ts

import { createFrontCommerceContext } from "@front-commerce/remix";
import { createRemixRequest } from "@remix-run/express/dist/server";

app.all(
  "*",
  createRequestHandler({
    build: require(BUILD_DIR),
    mode: process.env.NODE_ENV,
    getLoadContext(request, response) {
      const remixRequest = createRemixRequest(request, response);
      return {
        frontCommerce: createFrontCommerceContext(remixRequest),
      };
    },
  })
);

@front-commerce/remix/node​

@front-commerce/remix/react​

We exposed new methods in the @front-commerce/remix to replace the methods from @remix-run which allows for better type safety:

These methods are used the same as the ones from @remix-run with the exception of useApiFetcher, for example:

/app/routes/my-route.tsx
import { useLoaderData } from "@remix-run/react";
import { useLoaderData } from "@front-commerce/remix/react";
import { json } from "@remix-run/node";
import { json } from "@front-commerce/remix/node";

const loader = () => {
  return json({
    foo: "bar" as const
    date: new Date()
  });
};

export default function MyRoute() {
  const data = useLoaderData<typeof loader>();

  return (
    <div>
      {data.foo} // data will be typed as { foo: "bar", date: string } instead of SerializeObject<UndefinedToOptional<{ foo: "bar", date: string }>>
    </div>
  );
}

In the above example the data will be typed as

{ foo: "bar", date: string }

Instead of the standard remix SerializeObject type:

SerializeObject<UndefinedToOptional<{ foo: "bar"; date: string }>>;

useApiFetcher​

The useApiFetcher is an optimised fetcher which allows to deduplicate client-side calls to the same /api endpoint. It is designed to replace the load method from useFetcher for API calls.

Here is an example of how to change from useFetcher to useApiFetcher:

/app/routes/my-route.tsx
import type { loader } from "./api.cart";
import { useFetcher } from "@front-commerce/remix/react";

export default function MyRoute() {
  const fetcher = useFetcher<typeof loader>();

  useEffect(() => {
    if (!fetcher.data && fetcher.state !== "loading") {
      fetcher.load("/api/cart");
    }
  }, [fetcher]);

  if (fetcher.state === "loading") {
    return <div>Loading...</div>;
  }

  const data = fetcher.data;

  return (
    <div>
      Cart Id: {data.cart.id}
      Cart Qty: {data.cart.items_qty}
    </div>
  );
}

Here is an example of 5 concurrent calls to the same /api/cart endpoint:

http://localhost:4000

As you can see with the useFetcher it will call the API for each component, with the useApiFetcher it will only called the API once and share the data between the components. This also works when using the useRevalidator hook.

CLI​

dev​

Starts the application in development mode (hot-code reloading, error reporting, etc.)

Usage

$ front-commerce dev

Options

--help, -h      Displays this message
--port, -p      Port to run the server on
--verbose, -v   Verbose logging for debugging purposes

Unstable Options

--command, -c   Command used to run your app server
--manual, -m    Command used to run your app server
--no-restart    Do not restart the app server when rebuilds occur.

build​

Compiles the application for production deployment

Usage

$ front-commerce build

Options

--help, -h          Displays this message
--sourcemaps, -s    Generate source maps
--verbose, -v       Verbose logging for debugging purposes

translate​

Extract translations from your application sources

Usage

$ front-commerce translate <path> --locale <locale>

Options

--help, -h      Displays this message
--locale        Output locale for the translations

codegen​

Run the graphql-codegen command

Usage

$ front-commerce codegen

Options

--help, -h      Displays this message
--watch, -w     Watch for changes and regenerate
--verbose, -v   Verbose logging for debugging purposes

find-unused-style-variables​

Checks the application for unused style variables.

Usage

$ front-commerce find-unused-style-variables <path/to/your/project> [second/path/to/your/project] ...

Options

--help, -h      Displays this message

migrate​

Migrate your project to a new version of Front-Commerce

Usage

$ front-commerce migrate <target>

Options

--help, -h      Displays this message
--dry, -d       Run the migration without changing any file
--verbose       Show more information about the migration