feat(cli): create graphql schema using gql.tada (#658)

.changeset/rotten-cheetahs-bathe.md

@@ -0,0 +1,6 @@
+---
+"@bigcommerce/create-catalyst": minor
+"@bigcommerce/catalyst-core": minor
+---
+
+create graphql schema using gql.tada

.github/workflows/basic.yml

@@ -38,6 +38,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Graphql Tada
+        run: pnpm run -r generate
+
       - name: Graphql Codegen
         run: pnpm run -r codegen
 

apps/core/codegen.ts

@@ -1,57 +1,7 @@
 import { CodegenConfig } from '@graphql-codegen/cli';
 
-export const graphqlApiDomain: string =
-  process.env.BIGCOMMERCE_GRAPHQL_API_DOMAIN ?? 'mybigcommerce.com';
-
-const getToken = () => {
-  const token = process.env.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN;
-
-  if (!token) {
-    throw new Error('Missing customer impersonation token');
-  }
-
-  return token;
-};
-
-const getStoreHash = () => {
-  const storeHash = process.env.BIGCOMMERCE_STORE_HASH;
-
-  if (!storeHash) {
-    throw new Error('Missing store hash');
-  }
-
-  return storeHash;
-};
-
-const getChannelId = () => {
-  const channelId = process.env.BIGCOMMERCE_CHANNEL_ID;
-
-  return channelId;
-};
-
-const getEndpoint = () => {
-  const storeHash = getStoreHash();
-  const channelId = getChannelId();
-
-  // Not all sites have the channel-specific canonical URL backfilled.
-  // Wait till MSF-2643 is resolved before removing and simplifying the endpoint logic.
-  if (!channelId || channelId === '1') {
-    return `https://store-${storeHash}.${graphqlApiDomain}/graphql`;
-  }
-
-  return `https://store-${storeHash}-${channelId}.${graphqlApiDomain}/graphql`;
-};
-
 const config: CodegenConfig = {
-  schema: [
-    {
-      [getEndpoint()]: {
-        headers: {
-          Authorization: `Bearer ${getToken()}`,
-        },
-      },
-    },
-  ],
+  schema: './schema.graphql',
   documents: ['client/queries/**/*.ts', 'client/mutations/**/*.ts', 'client/fragments/**/*.ts'],
   generates: {
     './client/generated/': {
@@ -71,10 +21,6 @@ const config: CodegenConfig = {
         },
       },
     },
-    './schema.graphql': {
-      plugins: ['schema-ast'],
-      watchPattern: '',
-    },
   },
 };
 

apps/core/package.json

@@ -4,11 +4,12 @@
   "version": "0.1.1",
   "private": true,
   "scripts": {
-    "dev": "concurrently \"npm:dev-*\"",
+    "dev": "npm run generate && concurrently \"npm:dev-*\"",
     "dev-next": "next dev",
     "dev-codegen": "dotenv -e .env.local -- npm run codegen -- -w",
     "codegen": "dotenv -e .env.local -- gql-gen --errors-only --config codegen.ts",
-    "build": "npm run codegen && next build",
+    "generate": "dotenv -e .env.local -- node ./scripts/generate.cjs",
+    "build": "npm run generate && npm run codegen && next build",
     "start": "next start",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
@@ -23,7 +24,7 @@
     "@vercel/kv": "^1.0.0",
     "@vercel/speed-insights": "^1.0.1",
     "clsx": "^2.0.0",
-    "gql.tada": "^1.3.2",
+    "gql.tada": "^1.3.5",
     "graphql": "^16.8.1",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.294.0",
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.5.0",
     "@bigcommerce/eslint-config-catalyst": "workspace:^",
+    "@gql.tada/cli-utils": "^0.2.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/schema-ast": "^4.0.0",

apps/core/scripts/generate.cjs

@@ -0,0 +1,52 @@
+const { generateSchema, generateTadaTypes } = require('@gql.tada/cli-utils');
+
+const graphqlApiDomain = process.env.BIGCOMMERCE_GRAPHQL_API_DOMAIN ?? 'mybigcommerce.com';
+
+const getStoreHash = () => {
+  const storeHash = process.env.BIGCOMMERCE_STORE_HASH;
+
+  if (!storeHash) {
+    throw new Error('Missing store hash');
+  }
+
+  return storeHash;
+};
+
+const getChannelId = () => {
+  const channelId = process.env.BIGCOMMERCE_CHANNEL_ID;
+
+  return channelId;
+};
+
+const getToken = () => {
+  const token = process.env.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN;
+
+  if (!token) {
+    throw new Error('Missing customer impersonation token');
+  }
+
+  return token;
+};
+
+const getEndpoint = () => {
+  const storeHash = getStoreHash();
+  const channelId = getChannelId();
+
+  // Not all sites have the channel-specific canonical URL backfilled.
+  // Wait till MSF-2643 is resolved before removing and simplifying the endpoint logic.
+  if (!channelId || channelId === '1') {
+    return `https://store-${storeHash}.${graphqlApiDomain}/graphql`;
+  }
+
+  return `https://store-${storeHash}-${channelId}.${graphqlApiDomain}/graphql`;
+};
+
+const generate = async () => {
+  await generateSchema(getEndpoint(), {
+    headers: { Authorization: `Bearer ${getToken()}` },
+  });
+
+  await generateTadaTypes();
+};
+
+generate();

packages/create-catalyst/src/commands/create.ts

@@ -198,6 +198,12 @@ export const create = async (options: CreateCommandOptions) => {
 
   await installDependencies(projectDir, packageManager);
 
+  await spinner(exec(`${packageManager} run generate`, { cwd: projectDir }), {
+    text: 'Creating GraphQL schema...',
+    successText: 'Created GraphQL schema',
+    failText: (err) => chalk.red(`Failed to create GraphQL schema: ${err.message}`),
+  });
+
   await spinner(exec(`${packageManager} run codegen`, { cwd: projectDir }), {
     text: 'Generating GraphQL types...',
     successText: 'GraphQL types generated successfully',