Add GQL support for theme access tokens

packages/cli-kit/src/private/node/api.ts

@@ -70,7 +70,7 @@ async function makeVerboseRequest<T extends {headers: Headers; status: number}>(
       }
       const sanitizedHeaders = sanitizedHeadersOutput(responseHeaders)
 
-      if (err.response.errors?.some((error) => error.extensions.code === '429') || err.response.status === 429) {
+      if (errorsIncludeStatus429(err)) {
         let delayMs: number | undefined
 
         try {
@@ -120,6 +120,19 @@ async function makeVerboseRequest<T extends {headers: Headers; status: number}>(
   }
 }
 
+function errorsIncludeStatus429(error: ClientError): boolean {
+  if (error.response.status === 429) {
+    return true
+  }
+
+  // GraphQL returns a 401 with a string error message when auth fails
+  // Therefore error.response.errros can be a string or GraphQLError[]
+  if (typeof error.response.errors === 'string') {
+    return false
+  }
+  return error.response.errors?.some((error) => error.extensions?.code === '429') ?? false
+}
+
 export async function simpleRequestWithDebugLog<T extends {headers: Headers; status: number}>(
   {request, url}: RequestOptions<T>,
   errorHandler?: (error: unknown, requestId: string | undefined) => unknown,

packages/cli-kit/src/private/node/api/graphql.ts

@@ -1,21 +1,22 @@
-/* eslint-disable @typescript-eslint/no-base-to-string */
 import {GraphQLClientError, sanitizedHeadersOutput} from './headers.js'
+import {sanitizeURL} from './urls.js'
 import {stringifyMessage, outputContent, outputToken, outputDebug} from '../../../public/node/output.js'
 import {AbortError} from '../../../public/node/error.js'
-import {ClientError, RequestDocument, Variables} from 'graphql-request'
+import {ClientError, Variables} from 'graphql-request'
 
 export function debugLogRequestInfo(
   api: string,
-  query: RequestDocument,
+  query: string,
+  url: string,
   variables?: Variables,
   headers: {[key: string]: string} = {},
 ) {
   outputDebug(outputContent`Sending ${outputToken.json(api)} GraphQL request:
   ${outputToken.raw(query.toString().trim())}
 ${variables ? `\nWith variables:\n${sanitizeVariables(variables)}\n` : ''}
 With request headers:
-${sanitizedHeadersOutput(headers)}
-`)
+${sanitizedHeadersOutput(headers)}\n
+to ${sanitizeURL(url)}`)
 }
 
 function sanitizeVariables(variables: Variables): string {

packages/cli-kit/src/private/node/api/headers.test.ts

@@ -52,25 +52,28 @@ describe('common API methods', () => {
     })
   })
 
-  test.each(['shpat', 'shpua', 'shpca'])(`when custom app token starts with %s, do not prepend 'Bearer'`, (prefix) => {
-    // Given
-    vi.mocked(randomUUID).mockReturnValue('random-uuid')
-    vi.mocked(firstPartyDev).mockReturnValue(false)
-    const token = `${prefix}_my_token`
-    // When
-    const headers = buildHeaders(token)
+  test.each(['shpat', 'shpua', 'shpca', 'shptka'])(
+    `when custom app token starts with %s, do not prepend 'Bearer'`,
+    (prefix) => {
+      // Given
+      vi.mocked(randomUUID).mockReturnValue('random-uuid')
+      vi.mocked(firstPartyDev).mockReturnValue(false)
+      const token = `${prefix}_my_token`
+      // When
+      const headers = buildHeaders(token)
 
-    // Then
-    const version = CLI_KIT_VERSION
-    expect(headers).toEqual({
-      'Content-Type': 'application/json',
-      'Keep-Alive': 'timeout=30',
-      'X-Shopify-Access-Token': token,
-      'User-Agent': `Shopify CLI; v=${version}`,
-      authorization: token,
-      'Sec-CH-UA-PLATFORM': process.platform,
-    })
-  })
+      // Then
+      const version = CLI_KIT_VERSION
+      expect(headers).toEqual({
+        'Content-Type': 'application/json',
+        'Keep-Alive': 'timeout=30',
+        'X-Shopify-Access-Token': token,
+        'User-Agent': `Shopify CLI; v=${version}`,
+        authorization: token,
+        'Sec-CH-UA-PLATFORM': process.platform,
+      })
+    },
+  )
 
   test('sanitizedHeadersOutput removes the headers that include the token', () => {
     // Given

packages/cli-kit/src/private/node/api/headers.ts

@@ -56,7 +56,7 @@ export function buildHeaders(token?: string): {[key: string]: string} {
     ...(firstPartyDev() && {'X-Shopify-Cli-Employee': '1'}),
   }
   if (token) {
-    const authString = token.match(/^shp(at|ua|ca)/) ? token : `Bearer ${token}`
+    const authString = token.match(/^shp(at|ua|ca|tka)/) ? token : `Bearer ${token}`
 
     headers.authorization = authString
     headers['X-Shopify-Access-Token'] = authString

packages/cli-kit/src/private/node/api/rest.ts

@@ -1,5 +1,5 @@
 import {buildHeaders} from './headers.js'
-import {defaultThemeKitAccessDomain, environmentVariables} from '../constants.js'
+import {themeKitAccessDomain} from '../constants.js'
 import {AdminSession} from '@shopify/cli-kit/node/session'
 
 export function restRequestBody<T>(requestBody?: T) {
@@ -14,9 +14,7 @@ export function restRequestUrl(
   apiVersion: string,
   path: string,
   searchParams: {[name: string]: string} = {},
-  env = process.env,
 ) {
-  const themeKitAccessDomain = env[environmentVariables.themeKitAccessDomain] || defaultThemeKitAccessDomain
   const url = new URL(
     isThemeAccessSession(session)
       ? `https://${themeKitAccessDomain}/cli/admin/api/${apiVersion}${path}.json`

packages/cli-kit/src/private/node/constants.ts

@@ -80,3 +80,6 @@ export const sessionConstants = {
 export const bugsnagApiKey = '9e1e6889176fd0c795d5c659225e0fae'
 
 export const reportingRateLimit = {limit: 300, timeout: {days: 1}}
+
+export const themeKitAccessDomain =
+  process.env[environmentVariables.themeKitAccessDomain] ?? defaultThemeKitAccessDomain

packages/cli-kit/src/public/node/api/admin.test.ts

@@ -57,10 +57,39 @@ describe('admin-graphql-api', () => {
       query: 'query',
       api: 'Admin',
       url: 'https://store.myshopify.com/admin/api/2022-01/graphql.json',
+      addedHeaders: {},
       token,
       variables: {variables: 'variables'},
     })
   })
+
+  test('request is called with correct parameters when it is a theme access session', async () => {
+    // Given
+    const themeAccessToken = 'shptka_token'
+    const themeAccessSession = {
+      ...Session,
+      token: themeAccessToken,
+    }
+
+    vi.mocked(graphqlRequest).mockResolvedValue(mockedResult)
+    vi.mocked(graphqlRequestDoc).mockResolvedValue(mockedResult)
+
+    // When
+    await admin.adminRequest('query', themeAccessSession, {variables: 'variables'})
+
+    // Then
+    expect(graphqlRequest).toHaveBeenLastCalledWith({
+      query: 'query',
+      api: 'Admin',
+      addedHeaders: {
+        'X-Shopify-Access-Token': 'shptka_token',
+        'X-Shopify-Shop': 'store',
+      },
+      url: `https://${defaultThemeKitAccessDomain}/cli/admin/api/2022-01/graphql.json`,
+      token: themeAccessToken,
+      variables: {variables: 'variables'},
+    })
+  })
 })
 
 describe('admin-rest-api', () => {

packages/cli-kit/src/public/node/api/admin.ts

@@ -2,10 +2,16 @@ import {graphqlRequest, graphqlRequestDoc, GraphQLResponseOptions, GraphQLVariab
 import {AdminSession} from '../session.js'
 import {outputContent, outputToken} from '../../../public/node/output.js'
 import {BugError, AbortError} from '../error.js'
-import {restRequestBody, restRequestHeaders, restRequestUrl} from '../../../private/node/api/rest.js'
+import {
+  restRequestBody,
+  restRequestHeaders,
+  restRequestUrl,
+  isThemeAccessSession,
+} from '../../../private/node/api/rest.js'
 import {fetch} from '../http.js'
 import {PublicApiVersions} from '../../../cli/api/graphql/admin/generated/public_api_versions.js'
 import {normalizeStoreFqdn} from '../context/fqdn.js'
+import {themeKitAccessDomain} from '../../../private/node/constants.js'
 import {ClientError, Variables} from 'graphql-request'
 import {TypedDocumentNode} from '@graphql-typed-document-node/core'
 
@@ -21,8 +27,9 @@ export async function adminRequest<T>(query: string, session: AdminSession, vari
   const api = 'Admin'
   const version = await fetchLatestSupportedApiVersion(session)
   const store = await normalizeStoreFqdn(session.storeFqdn)
-  const url = adminUrl(store, version)
-  return graphqlRequest({query, api, url, token: session.token, variables})
+  const url = adminUrl(store, version, session)
+  const addedHeaders = themeAccessHeaders(session)
+  return graphqlRequest({query, api, addedHeaders, url, token: session.token, variables})
 }
 
 /**
@@ -47,15 +54,23 @@ export async function adminRequestDoc<TResult, TVariables extends Variables>(
     apiVersion = await fetchLatestSupportedApiVersion(session)
   }
   const store = await normalizeStoreFqdn(session.storeFqdn)
+  const addedHeaders = themeAccessHeaders(session)
   const opts = {
-    url: adminUrl(store, apiVersion),
+    url: adminUrl(store, apiVersion, session),
     api: 'Admin',
     token: session.token,
+    addedHeaders,
   }
   const result = graphqlRequestDoc<TResult, TVariables>({...opts, query, variables, responseOptions})
   return result
 }
 
+function themeAccessHeaders(session: AdminSession): {[header: string]: string} {
+  return isThemeAccessSession(session)
+    ? {'X-Shopify-Shop': session.storeFqdn, 'X-Shopify-Access-Token': session.token}
+    : {}
+}
+
 /**
  * GraphQL query to retrieve the latest supported API version.
  *
@@ -121,11 +136,17 @@ async function fetchApiVersions(session: AdminSession): Promise<ApiVersion[]> {
  *
  * @param store - Store FQDN.
  * @param version - API version.
+ * @param session - User session.
  * @returns - Admin API URL.
  */
-export function adminUrl(store: string, version: string | undefined): string {
+export function adminUrl(store: string, version: string | undefined, session?: AdminSession): string {
   const realVersion = version ?? 'unstable'
-  return `https://${store}/admin/api/${realVersion}/graphql.json`
+
+  const url =
+    session && isThemeAccessSession(session)
+      ? `https://${themeKitAccessDomain}/cli/admin/api/${realVersion}/graphql.json`
+      : `https://${store}/admin/api/${realVersion}/graphql.json`
+  return url
 }
 
 interface ApiVersion {

packages/cli-kit/src/public/node/api/graphql.test.ts

@@ -101,6 +101,7 @@ describe('graphqlRequestDoc', () => {
       `query QueryName {
   example
 }`,
+      'mockedAddress',
       mockVariables,
       expect.anything(),
     )

packages/cli-kit/src/public/node/api/graphql.ts

@@ -55,7 +55,7 @@ async function performGraphQLRequest<TResult>(options: PerformGraphQLRequestOpti
     ...buildHeaders(token),
   }
 
-  debugLogRequestInfo(api, queryAsString, variables, headers)
+  debugLogRequestInfo(api, queryAsString, url, variables, headers)
   const clientOptions = {agent: await httpsAgent(), headers}
   const client = new GraphQLClient(url, clientOptions)