Inject your Magento GraphQL schema

Front-Commerce aims at making Magento developers productive by allowing them to work with what they know from Magento. In order to achieve this, our goal is to expose as much from the Magento's GraphQL schema as possible in Front-Commerce. We follow evolutions in Magento core very closely, and aim at including the new stable parts of this schema in Front-Commerce as soon as they match the parts we've developed over the years in terms of feature, performance and stability.

But sometimes, you may need to expose parts of the Magento GraphQL schema that are not yet available in Front-Commerce. This can be the case for example if you need to use a new Magento feature that is not yet available in Front-Commerce, or if you have extended your Magento GraphQL schema with custom fields.

In this case, you can inject your own Magento GraphQL schema into your Front-Commerce project. This can be done by using the schema option in the magento2 extension configuration.

Regenerate Graphql Schema from remote instance

To regenerate the Graphql Schema from a remote instance, you can use the following command:

MAGENTO2_SCHEMA_PATH=<URL_to_your_magento_graphql_endpoint> pnpm run -C node_modules/@front-commerce/magento2 generate-schema

This will generate a new magento2-schema.gql file in the node_modules/@front-commerce/magento2/generated directory.

Inject the generated schema into your project

Once the schema is generated, you can inject it into your project by adding the following configuration to your front-commerce.config.ts file:

front-commerce.config.ts

import { defineConfig } from "@front-commerce/core/config";
import magento2 from "@front-commerce/magento2";

export default defineConfig({
  extensions: [
    magento2({
      storesConfig,
      schema:
        "./node_modules/@front-commerce/magento2/generated/magento2-schema.gql",
    }),
    // ...
  ],
  // ...
});

This will inject the generated schema into your project, and you will be able to use the new fields in your project.

note

The schema option accepts any value supported by GraphQL Codegen's schema field, which means you don't need to source your schema from an endpoint - you can also use local files or other formats (see all available formats here).

Use the generated schema in your project

Once the schema is injected into your project, you can use it in your project by adding new modules that will use your extended schema or directly in your application by using your new GraphQL queries or mutations.

app/routes/acme-route.tsx

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

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

  const response = await app.graphql.query(/* GraphQL */ `
    query FromYourExtendedSchema {
      acmeField
    }
  `);

  return json(response);
};

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

  return <div>{data.acmeField}</div>;
}