Handle hydrogen app installation error on CLI (#1075)

.changeset/eight-scissors-cheer.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Show proper error message when Hydrogen App isn't installed on Shop

packages/cli/src/lib/graphql/admin/client.test.ts

@@ -0,0 +1,72 @@
+import {AbortError} from '@shopify/cli-kit/node/error';
+import {describe, it, expect, vi, afterEach} from 'vitest';
+
+import {adminRequest} from './client.js';
+
+import {
+  graphqlRequest,
+  type GraphQLVariables,
+} from '@shopify/cli-kit/node/api/graphql';
+
+vi.mock('@shopify/cli-kit/node/api/graphql');
+
+interface TestSchema {
+  test: string;
+}
+
+describe('adminRequest', () => {
+  it('sends a query to the Admin API and returns the successful response', async () => {
+    const fakeResponse = {
+      test: 'test',
+    };
+
+    vi.mocked(graphqlRequest).mockResolvedValue(fakeResponse);
+
+    const response = await adminRequest<TestSchema>('', {
+      token: '',
+      storeFqdn: '',
+    });
+
+    expect(response).toContain(fakeResponse);
+  });
+
+  describe('error response', () => {
+    it('sends a query to the Admin API and returns an unknown error response', async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: 'test error',
+          },
+        ],
+      };
+
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+
+      const response = adminRequest<TestSchema>('', {
+        token: '',
+        storeFqdn: '',
+      });
+
+      await expect(response).rejects.toContain(fakeGraphqlError);
+    });
+
+    it("sends a query to the Admin API and returns an error where app isn't installed", async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: 'app is not installed',
+          },
+        ],
+      };
+
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+
+      const response = adminRequest<TestSchema>('', {
+        token: '',
+        storeFqdn: '',
+      });
+
+      await expect(response).rejects.toThrowError(AbortError);
+    });
+  });
+});

packages/cli/src/lib/graphql/admin/client.ts

@@ -1,3 +1,4 @@
+import {AbortError} from '@shopify/cli-kit/node/error';
 import {
   graphqlRequest,
   type GraphQLVariables,
@@ -6,6 +7,12 @@ import type {AdminSession} from '../../auth.js';
 
 export type {AdminSession};
 
+interface GraphqlError {
+  message: string;
+  locations: string[];
+  path: string[];
+}
+
 /**
  * This is a temporary workaround until cli-kit includes a way to specify
  * API versions for the Admin API because we need to target the unstable
@@ -23,5 +30,28 @@ export async function adminRequest<T>(
 ): Promise<T> {
   const api = 'Admin';
   const url = `https://${session.storeFqdn}/admin/api/unstable/graphql.json`;
-  return graphqlRequest({query, api, url, token: session.token, variables});
+  const response: Promise<T> = graphqlRequest({
+    query,
+    api,
+    url,
+    token: session.token,
+    variables,
+  });
+
+  try {
+    return await response;
+  } catch (error: any) {
+    const errors: GraphqlError[] = error.errors;
+
+    if (
+      errors.some((error) => error.message.includes('app is not installed'))
+    ) {
+      throw new AbortError(
+        "Hydrogen sales channel isn't installed",
+        'Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen',
+      );
+    }
+
+    throw error;
+  }
 }

packages/cli/src/lib/missing-storefronts.ts

@@ -9,7 +9,6 @@ export function logMissingStorefronts(adminSession: AdminSession) {
     body: 'There are no Hydrogen storefronts on your Shop.',
     nextSteps: [
       `Ensure you have specified the correct shop (you specified: ${adminSession.storeFqdn})`,
-      `Ensure you have the Hydrogen sales channel installed https://apps.shopify.com/hydrogen`,
       `Create a new Hydrogen storefront: ${newHydrogenStorefrontUrl(
         adminSession,
       )}`,