Add dedicated app and store GraphiQL commands

.changeset/store-execute-graphiql.md

@@ -0,0 +1,7 @@
+---
+'@shopify/cli-kit': minor
+'@shopify/app': minor
+'@shopify/store': minor
+---
+
+Add `shopify app graphiql` and `shopify store graphiql` commands for opening authenticated local Admin API GraphiQL sessions.

docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts

@@ -0,0 +1,66 @@
+// This is an autogenerated file. Don't edit this file manually.
+/**
+ * The following flags are available for the `app graphiql` command:
+ * @publicDocs
+ */
+export interface appgraphiql {
+  /**
+   * The Client ID of your app.
+   * @environment SHOPIFY_FLAG_CLIENT_ID
+   */
+  '--client-id <value>'?: string
+
+  /**
+   * The name of the app configuration.
+   * @environment SHOPIFY_FLAG_APP_CONFIG
+   */
+  '-c, --config <value>'?: string
+
+  /**
+   * Disable color output.
+   * @environment SHOPIFY_FLAG_NO_COLOR
+   */
+  '--no-color'?: ''
+
+  /**
+   * The path to your app directory.
+   * @environment SHOPIFY_FLAG_PATH
+   */
+  '--path <value>'?: string
+
+  /**
+   * Local port for the GraphiQL server. Must be between 1 and 65535.
+   * @environment SHOPIFY_FLAG_PORT
+   */
+  '--port <value>'?: string
+
+  /**
+   * Reset all your settings.
+   * @environment SHOPIFY_FLAG_RESET
+   */
+  '--reset'?: ''
+
+  /**
+   * The myshopify.com domain of the store to open GraphiQL against. The app must be installed on the store. If not specified, you will be prompted to select a store.
+   * @environment SHOPIFY_FLAG_STORE
+   */
+  '-s, --store <value>'?: string
+
+  /**
+   * The values for any GraphQL variables in your query or mutation, in JSON format.
+   * @environment SHOPIFY_FLAG_VARIABLES
+   */
+  '-v, --variables <value>'?: string
+
+  /**
+   * Increase the verbosity of the output.
+   * @environment SHOPIFY_FLAG_VERBOSE
+   */
+  '--verbose'?: ''
+
+  /**
+   * The API version to use in GraphiQL. Defaults to the latest stable version.
+   * @environment SHOPIFY_FLAG_VERSION
+   */
+  '--version <value>'?: string
+}

docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts

@@ -0,0 +1,48 @@
+// This is an autogenerated file. Don't edit this file manually.
+/**
+ * The following flags are available for the `store graphiql` command:
+ * @publicDocs
+ */
+export interface storegraphiql {
+  /**
+   * Allow GraphQL mutations to run against the target store.
+   * @environment SHOPIFY_FLAG_ALLOW_MUTATIONS
+   */
+  '--allow-mutations'?: ''
+
+  /**
+   * Disable color output.
+   * @environment SHOPIFY_FLAG_NO_COLOR
+   */
+  '--no-color'?: ''
+
+  /**
+   * Local port for the GraphiQL server. Must be between 1 and 65535.
+   * @environment SHOPIFY_FLAG_PORT
+   */
+  '--port <value>'?: string
+
+  /**
+   * The myshopify.com domain of the store.
+   * @environment SHOPIFY_FLAG_STORE
+   */
+  '-s, --store <value>': string
+
+  /**
+   * The values for any GraphQL variables in your query or mutation, in JSON format.
+   * @environment SHOPIFY_FLAG_VARIABLES
+   */
+  '-v, --variables <value>'?: string
+
+  /**
+   * Increase the verbosity of the output.
+   * @environment SHOPIFY_FLAG_VERBOSE
+   */
+  '--verbose'?: ''
+
+  /**
+   * The API version to use in GraphiQL. Defaults to the latest stable version.
+   * @environment SHOPIFY_FLAG_VERSION
+   */
+  '--version <value>'?: string
+}

docs-shopify.dev/generated/generated_docs_data_v2.json

@@ -1822,6 +1822,107 @@
       "value": "export interface appgenerateextension {\n  /**\n   * The Client ID of your app.\n   * @environment SHOPIFY_FLAG_CLIENT_ID\n   */\n  '--client-id <value>'?: string\n\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Choose a starting template for your extension, where applicable\n   * @environment SHOPIFY_FLAG_FLAVOR\n   */\n  '--flavor <value>'?: string\n\n  /**\n   * name of your Extension\n   * @environment SHOPIFY_FLAG_NAME\n   */\n  '-n, --name <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * The path to your app directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Reset all your settings.\n   * @environment SHOPIFY_FLAG_RESET\n   */\n  '--reset'?: ''\n\n  /**\n   * Extension template\n   * @environment SHOPIFY_FLAG_EXTENSION_TEMPLATE\n   */\n  '-t, --template <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n}"
     }
   },
+  "appgraphiql": {
+    "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts": {
+      "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+      "name": "appgraphiql",
+      "description": "The following flags are available for the `app graphiql` command:",
+      "isPublicDocs": true,
+      "members": [
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--client-id <value>",
+          "value": "string",
+          "description": "The Client ID of your app.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_CLIENT_ID"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--no-color",
+          "value": "''",
+          "description": "Disable color output.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_NO_COLOR"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--path <value>",
+          "value": "string",
+          "description": "The path to your app directory.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_PATH"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--port <value>",
+          "value": "string",
+          "description": "Local port for the GraphiQL server. Must be between 1 and 65535.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_PORT"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--reset",
+          "value": "''",
+          "description": "Reset all your settings.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_RESET"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--verbose",
+          "value": "''",
+          "description": "Increase the verbosity of the output.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VERBOSE"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--version <value>",
+          "value": "string",
+          "description": "The API version to use in GraphiQL. Defaults to the latest stable version.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VERSION"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "-c, --config <value>",
+          "value": "string",
+          "description": "The name of the app configuration.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_APP_CONFIG"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "-s, --store <value>",
+          "value": "string",
+          "description": "The myshopify.com domain of the store to open GraphiQL against. The app must be installed on the store. If not specified, you will be prompted to select a store.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_STORE"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/app-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "-v, --variables <value>",
+          "value": "string",
+          "description": "The values for any GraphQL variables in your query or mutation, in JSON format.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VARIABLES"
+        }
+      ],
+      "value": "export interface appgraphiql {\n  /**\n   * The Client ID of your app.\n   * @environment SHOPIFY_FLAG_CLIENT_ID\n   */\n  '--client-id <value>'?: string\n\n  /**\n   * The name of the app configuration.\n   * @environment SHOPIFY_FLAG_APP_CONFIG\n   */\n  '-c, --config <value>'?: string\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * The path to your app directory.\n   * @environment SHOPIFY_FLAG_PATH\n   */\n  '--path <value>'?: string\n\n  /**\n   * Local port for the GraphiQL server. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_PORT\n   */\n  '--port <value>'?: string\n\n  /**\n   * Reset all your settings.\n   * @environment SHOPIFY_FLAG_RESET\n   */\n  '--reset'?: ''\n\n  /**\n   * The myshopify.com domain of the store to open GraphiQL against. The app must be installed on the store. If not specified, you will be prompted to select a store.\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>'?: string\n\n  /**\n   * The values for any GraphQL variables in your query or mutation, in JSON format.\n   * @environment SHOPIFY_FLAG_VARIABLES\n   */\n  '-v, --variables <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n\n  /**\n   * The API version to use in GraphiQL. Defaults to the latest stable version.\n   * @environment SHOPIFY_FLAG_VERSION\n   */\n  '--version <value>'?: string\n}"
+    }
+  },
   "appimportcustomdatadefinitions": {
     "docs-shopify.dev/commands/interfaces/app-import-custom-data-definitions.interface.ts": {
       "filePath": "docs-shopify.dev/commands/interfaces/app-import-custom-data-definitions.interface.ts",
@@ -4631,6 +4732,79 @@
       "value": "export interface storeexecute {\n  /**\n   * Allow GraphQL mutations to run against the target store.\n   * @environment SHOPIFY_FLAG_ALLOW_MUTATIONS\n   */\n  '--allow-mutations'?: ''\n\n  /**\n   * Output the result as JSON. Automatically disables color output.\n   * @environment SHOPIFY_FLAG_JSON\n   */\n  '-j, --json'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * The file name where results should be written, instead of STDOUT.\n   * @environment SHOPIFY_FLAG_OUTPUT_FILE\n   */\n  '--output-file <value>'?: string\n\n  /**\n   * The GraphQL query or mutation, as a string.\n   * @environment SHOPIFY_FLAG_QUERY\n   */\n  '-q, --query <value>'?: string\n\n  /**\n   * Path to a file containing the GraphQL query or mutation. Can't be used with --query.\n   * @environment SHOPIFY_FLAG_QUERY_FILE\n   */\n  '--query-file <value>'?: string\n\n  /**\n   * The myshopify.com domain of the store.\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>': string\n\n  /**\n   * Path to a file containing GraphQL variables in JSON format. Can't be used with --variables.\n   * @environment SHOPIFY_FLAG_VARIABLE_FILE\n   */\n  '--variable-file <value>'?: string\n\n  /**\n   * The values for any GraphQL variables in your query or mutation, in JSON format.\n   * @environment SHOPIFY_FLAG_VARIABLES\n   */\n  '-v, --variables <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n\n  /**\n   * The API version to use for the query or mutation. Defaults to the latest stable version.\n   * @environment SHOPIFY_FLAG_VERSION\n   */\n  '--version <value>'?: string\n}"
     }
   },
+  "storegraphiql": {
+    "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts": {
+      "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+      "name": "storegraphiql",
+      "description": "The following flags are available for the `store graphiql` command:",
+      "isPublicDocs": true,
+      "members": [
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--allow-mutations",
+          "value": "''",
+          "description": "Allow GraphQL mutations to run against the target store.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_ALLOW_MUTATIONS"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--no-color",
+          "value": "''",
+          "description": "Disable color output.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_NO_COLOR"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--port <value>",
+          "value": "string",
+          "description": "Local port for the GraphiQL server. Must be between 1 and 65535.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_PORT"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--verbose",
+          "value": "''",
+          "description": "Increase the verbosity of the output.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VERBOSE"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "--version <value>",
+          "value": "string",
+          "description": "The API version to use in GraphiQL. Defaults to the latest stable version.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VERSION"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "-s, --store <value>",
+          "value": "string",
+          "description": "The myshopify.com domain of the store.",
+          "environmentValue": "SHOPIFY_FLAG_STORE"
+        },
+        {
+          "filePath": "docs-shopify.dev/commands/interfaces/store-graphiql.interface.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "-v, --variables <value>",
+          "value": "string",
+          "description": "The values for any GraphQL variables in your query or mutation, in JSON format.",
+          "isOptional": true,
+          "environmentValue": "SHOPIFY_FLAG_VARIABLES"
+        }
+      ],
+      "value": "export interface storegraphiql {\n  /**\n   * Allow GraphQL mutations to run against the target store.\n   * @environment SHOPIFY_FLAG_ALLOW_MUTATIONS\n   */\n  '--allow-mutations'?: ''\n\n  /**\n   * Disable color output.\n   * @environment SHOPIFY_FLAG_NO_COLOR\n   */\n  '--no-color'?: ''\n\n  /**\n   * Local port for the GraphiQL server. Must be between 1 and 65535.\n   * @environment SHOPIFY_FLAG_PORT\n   */\n  '--port <value>'?: string\n\n  /**\n   * The myshopify.com domain of the store.\n   * @environment SHOPIFY_FLAG_STORE\n   */\n  '-s, --store <value>': string\n\n  /**\n   * The values for any GraphQL variables in your query or mutation, in JSON format.\n   * @environment SHOPIFY_FLAG_VARIABLES\n   */\n  '-v, --variables <value>'?: string\n\n  /**\n   * Increase the verbosity of the output.\n   * @environment SHOPIFY_FLAG_VERBOSE\n   */\n  '--verbose'?: ''\n\n  /**\n   * The API version to use in GraphiQL. Defaults to the latest stable version.\n   * @environment SHOPIFY_FLAG_VERSION\n   */\n  '--version <value>'?: string\n}"
+    }
+  },
   "storeinfo": {
     "docs-shopify.dev/commands/interfaces/store-info.interface.ts": {
       "filePath": "docs-shopify.dev/commands/interfaces/store-info.interface.ts",

packages/app/src/cli/commands/app/graphiql.test.ts

@@ -0,0 +1,72 @@
+import AppGraphiQL from './graphiql.js'
+import {openAppGraphiQL} from '../../services/app/graphiql.js'
+import {prepareAppStoreContext} from '../../utilities/execute-command-helpers.js'
+import {
+  testAppLinked,
+  testOrganization,
+  testOrganizationApp,
+  testOrganizationStore,
+  testProject,
+} from '../../models/app/app.test-data.js'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+
+vi.mock('../../services/app/graphiql.js')
+vi.mock('../../utilities/execute-command-helpers.js')
+
+describe('app graphiql command', () => {
+  const app = testAppLinked()
+  const remoteApp = testOrganizationApp()
+  const store = testOrganizationStore({shopDomain: 'shop.myshopify.com'})
+
+  beforeEach(() => {
+    vi.mocked(prepareAppStoreContext).mockResolvedValue({
+      appContextResult: {
+        app,
+        remoteApp,
+        developerPlatformClient: remoteApp.developerPlatformClient,
+        organization: testOrganization(),
+        specifications: [],
+        project: testProject(),
+        activeConfig: {} as never,
+      },
+      store,
+    })
+    vi.mocked(openAppGraphiQL).mockResolvedValue()
+  })
+
+  test('prepares app/store context and opens GraphiQL', async () => {
+    const result = await AppGraphiQL.run([
+      '--path',
+      '/tmp/app',
+      '--client-id',
+      'client-id',
+      '--store',
+      'shop',
+      '--port',
+      '9123',
+      '--variables',
+      '{"id":1}',
+      '--version',
+      '2024-10',
+    ])
+
+    expect(prepareAppStoreContext).toHaveBeenCalledWith(
+      expect.objectContaining({
+        path: '/tmp/app',
+        'client-id': 'client-id',
+        store: 'shop.myshopify.com',
+        port: 9123,
+        variables: '{"id":1}',
+        version: '2024-10',
+      }),
+    )
+    expect(openAppGraphiQL).toHaveBeenCalledWith({
+      remoteApp,
+      store: 'shop.myshopify.com',
+      port: 9123,
+      variables: '{"id":1}',
+      apiVersion: '2024-10',
+    })
+    expect(result).toEqual({app})
+  })
+})