chore(app): extract GraphiQL client-credentials token provider, drop unused deps

Now that @shopify/cli-kit owns the GraphiQL server, packages/app no longer
needs Polaris, react-dom, or their type packages.

- Move the client_credentials TokenProvider out of graphiql.ts into its own
  graphiql-token-provider.ts so it has a clear seam and is testable in
  isolation.
- Add unit tests for createClientCredentialsTokenProvider covering caching
  semantics, forced refresh, and the OAuth request shape.
- Drop @shopify/polaris, @shopify/polaris-icons, react-dom, and
  @types/react-dom from packages/app/package.json. h3 stays because the
  extension dev server still uses it. react / @types/react stay for the
  Ink-based dev UI.

Author: gonzaloriestra

packages/app/package.json

@@ -52,8 +52,6 @@
     "@oclif/core": "4.5.3",
     "@shopify/cli-kit": "3.93.0",
     "@shopify/plugin-cloudflare": "3.93.0",
-    "@shopify/polaris": "12.27.0",
-    "@shopify/polaris-icons": "8.11.1",
     "@shopify/theme": "3.93.0",
     "@shopify/theme-check-node": "3.25.0",
     "@shopify/toml-patch": "0.3.0",
@@ -68,15 +66,13 @@
     "prettier": "3.8.1",
     "proper-lockfile": "4.1.2",
     "react": "19.2.4",
-    "react-dom": "19.2.4",
     "which": "4.0.0",
     "ws": "8.18.0"
   },
   "devDependencies": {
     "@types/diff": "^5.0.3",
     "@types/proper-lockfile": "4.1.4",
     "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
     "@types/which": "3.0.4",
     "@types/ws": "^8.5.13",
     "@vitest/coverage-istanbul": "^3.1.4"

packages/app/src/cli/services/dev/processes/graphiql-token-provider.test.ts

@@ -0,0 +1,73 @@
+import {createClientCredentialsTokenProvider} from './graphiql-token-provider.js'
+import {fetch} from '@shopify/cli-kit/node/http'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+
+vi.mock('@shopify/cli-kit/node/http')
+
+const mockedFetch = vi.mocked(fetch)
+
+function mockTokenResponse(token: string) {
+  mockedFetch.mockResolvedValueOnce({
+    json: async () => ({access_token: token}),
+  } as unknown as Awaited<ReturnType<typeof fetch>>)
+}
+
+describe('createClientCredentialsTokenProvider', () => {
+  beforeEach(() => {
+    mockedFetch.mockReset()
+  })
+
+  test('mints a token on first getToken call and caches it', async () => {
+    mockTokenResponse('first-token')
+
+    const provider = createClientCredentialsTokenProvider({
+      apiKey: 'api-key',
+      apiSecret: 'api-secret',
+      storeFqdn: 'store.myshopify.com',
+    })
+
+    expect(await provider.getToken()).toBe('first-token')
+    expect(await provider.getToken()).toBe('first-token')
+    expect(mockedFetch).toHaveBeenCalledTimes(1)
+  })
+
+  test('refreshToken always re-mints, even when a cached token exists', async () => {
+    mockTokenResponse('first-token')
+    mockTokenResponse('second-token')
+
+    const provider = createClientCredentialsTokenProvider({
+      apiKey: 'api-key',
+      apiSecret: 'api-secret',
+      storeFqdn: 'store.myshopify.com',
+    })
+
+    expect(await provider.getToken()).toBe('first-token')
+    expect(await provider.refreshToken!()).toBe('second-token')
+    expect(await provider.getToken()).toBe('second-token')
+    expect(mockedFetch).toHaveBeenCalledTimes(2)
+  })
+
+  test('posts the OAuth client_credentials body to the store admin endpoint', async () => {
+    mockTokenResponse('token')
+
+    const provider = createClientCredentialsTokenProvider({
+      apiKey: 'api-key',
+      apiSecret: 'api-secret',
+      storeFqdn: 'store.myshopify.com',
+    })
+    await provider.getToken()
+
+    expect(mockedFetch).toHaveBeenCalledWith(
+      'https://store.myshopify.com/admin/oauth/access_token',
+      expect.objectContaining({
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+          client_id: 'api-key',
+          client_secret: 'api-secret',
+          grant_type: 'client_credentials',
+        }),
+      }),
+    )
+  })
+})

packages/app/src/cli/services/dev/processes/graphiql-token-provider.ts

@@ -0,0 +1,48 @@
+import {TokenProvider} from '@shopify/cli-kit/node/graphiql/server'
+import {fetch} from '@shopify/cli-kit/node/http'
+
+interface ClientCredentialsTokenProviderOptions {
+  apiKey: string
+  apiSecret: string
+  storeFqdn: string
+}
+
+/**
+ * Returns a `TokenProvider` that mints Admin API tokens via OAuth `client_credentials`
+ * using a Partners app's `apiKey` + `apiSecret`. Tokens are cached in-memory and
+ * re-minted on demand when `refreshToken` is called (e.g. on a 401 from upstream).
+ *
+ * This is the strategy used by `shopify app dev`'s GraphiQL server. It assumes the app
+ * is installed on the target store and that the app secret can mint a fresh token at any time.
+ */
+export function createClientCredentialsTokenProvider({
+  apiKey,
+  apiSecret,
+  storeFqdn,
+}: ClientCredentialsTokenProviderOptions): TokenProvider {
+  let cachedToken: string | undefined
+
+  const mint = async (): Promise<string> => {
+    const tokenResponse = await fetch(`https://${storeFqdn}/admin/oauth/access_token`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        client_id: apiKey,
+        client_secret: apiSecret,
+        grant_type: 'client_credentials',
+      }),
+    })
+
+    const tokenJson = (await tokenResponse.json()) as {access_token: string}
+    cachedToken = tokenJson.access_token
+    return cachedToken
+  }
+
+  return {
+    getToken: async () => cachedToken ?? mint(),
+    refreshToken: async () => {
+      cachedToken = undefined
+      return mint()
+    },
+  }
+}

packages/app/src/cli/services/dev/processes/graphiql.ts

@@ -1,6 +1,6 @@
 import {BaseProcess, DevProcessFunction} from './types.js'
-import {setupGraphiQLServer, TokenProvider} from '@shopify/cli-kit/node/graphiql/server'
-import {fetch} from '@shopify/cli-kit/node/http'
+import {createClientCredentialsTokenProvider} from './graphiql-token-provider.js'
+import {setupGraphiQLServer} from '@shopify/cli-kit/node/graphiql/server'
 
 interface GraphiQLServerProcessOptions {
   appName: string
@@ -52,39 +52,3 @@ export const launchGraphiQLServer: DevProcessFunction<GraphiQLServerProcessOptio
     httpServer.close()
   })
 }
-
-/**
- * In-memory token provider that mints Admin API tokens via OAuth `client_credentials`
- * using the Partners app's `apiKey` + `apiSecret`. Refreshes lazily and re-mints on demand.
- */
-function createClientCredentialsTokenProvider(options: {
-  apiKey: string
-  apiSecret: string
-  storeFqdn: string
-}): TokenProvider {
-  let cachedToken: string | undefined
-
-  const mint = async (): Promise<string> => {
-    const tokenResponse = await fetch(`https://${options.storeFqdn}/admin/oauth/access_token`, {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        client_id: options.apiKey,
-        client_secret: options.apiSecret,
-        grant_type: 'client_credentials',
-      }),
-    })
-
-    const tokenJson = (await tokenResponse.json()) as {access_token: string}
-    cachedToken = tokenJson.access_token
-    return cachedToken
-  }
-
-  return {
-    getToken: async () => cachedToken ?? mint(),
-    refreshToken: async () => {
-      cachedToken = undefined
-      return mint()
-    },
-  }
-}