Setting Up Strapi Graphql in BigCommerce Catalyst

BigCommerce Catalyst uses typescript with graphql. This means that when integrating our strapi client with Catalyst we will need to add a grqphql engine in order to have proper types support. This guide will show you how to add the graphql tada engine to a BigCommerce Catalyst application.

---

Step-by-Step Setup: Graphql in BigCommerce Catalyst

Step 1: From the root of the project navigate to the core directory ~/core. From here, you will need to open the tsconfig.json file. Add the following under schemas.

"schemas": [
          {
            "name": "bigcommerce",
            "schema": "./bigcommerce.graphql",
            "tadaOutputLocation": "./bigcommerce-graphql.d.ts"
          },
          {
            "name": "strapi",
            "schema": "./strapi.graphql",
            "tadaOutputLocation": "./strapi-graphql.d.ts"
          }
        ]

By default, the BigCommerce schema declaration should appear. The strapi declaration will need to be added to the list of schemas. This declaration is saying that the strapi graphql schema declaration will live at ./strapi.graphql, which is a file in the core directory. A copy of the schema needs to be added to the project in order for types to properly be generated. To generate the ./strapi.graphql file, we will need to add a node package and a command to the projects package.json.

Step 2: From the ~/core directory, run the following:

pnpm i get-graphql-schema

Step 3: Open the pacakge.json and add the following command

"gen-strapi": "get-graphql-schema http://localhost:1337/graphql > strapi.graphql"

Now, running the pnpm gen-strapi command from the ~/core directory will generate your strapi schema files.

Note: That for the strapi configuration to generate properly, the strapi server needs to be running on localhost at port 1337. Tweak the command if in package.json if a different port is being used.

Step 4: To finalize type completion, add the following ~/core/strapi/graphql.ts file to your project.

import { initGraphQLTada } from 'gql.tada';
import type { introspection } from '~/strapi-graphql';
export const graphql = initGraphQLTada<{
  introspection: introspection;
}>();
export type { FragmentOf, ResultOf, VariablesOf } from 'gql.tada';
export { readFragment } from 'gql.tada';

Now, the exported graphql function can be used to add type inference to Strapi graphql queries!

Author: Maxwell Sherwin

---

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

BigCommerce Certified Partner, Oracle NetSuite Alliance Partner

As both a BigCommerce Certified Partner and an Oracle NetSuite Alliance Partner, Anchor Group is ready to handle BigCommerce and NetSuite projects alike! Whether you already have one platform and are looking to integrate the other, are considering a full-scale implementation of both platforms or simply need support with ongoing customizations, our team is ready to help answer any questions you might have! Get in touch!