Allow the graphql client to follow graphql spec and return errors

packages/api-clients/admin-api-client/src/graphql/client.ts

@@ -30,6 +30,7 @@ export function createAdminApiClient({
   customFetchApi,
   logger,
   isTesting,
+  matchGraphQLSpec,
 }: AdminApiClientOptions): AdminApiClient {
   const currentSupportedApiVersions = getCurrentSupportedApiVersions();
 
@@ -81,6 +82,7 @@ export function createAdminApiClient({
     retries,
     customFetchApi,
     logger,
+    matchGraphQLSpec,
   });
 
   const getHeaders = generateGetHeaders(config);

packages/api-clients/admin-api-client/src/types.ts

@@ -19,4 +19,5 @@ export type AdminApiClientOptions = Omit<
   customFetchApi?: CustomFetchApi;
   logger?: ApiClientLogger<AdminApiClientLogContentTypes>;
   isTesting?: boolean;
+  matchGraphQLSpec?: boolean;
 };

packages/api-clients/graphql-client/src/graphql-client/graphql-client.ts

@@ -41,6 +41,7 @@ export function createGraphQLClient({
   customFetchApi = fetch,
   retries = 0,
   logger,
+  matchGraphQLSpec = false,
 }: ClientOptions): GraphQLClient {
   validateRetries({client: CLIENT, retries});
 
@@ -57,8 +58,8 @@ export function createGraphQLClient({
     defaultRetryWaitTime: RETRY_WAIT_TIME,
   });
   const fetchFn = generateFetch(httpFetch, config);
-  const request = generateRequest(fetchFn);
-  const requestStream = generateRequestStream(fetchFn);
+  const request = generateRequest(fetchFn, matchGraphQLSpec);
+  const requestStream = generateRequestStream(fetchFn, matchGraphQLSpec);
 
   return {
     config,
@@ -76,11 +77,20 @@ export function generateClientLogger(logger?: Logger): Logger {
   };
 }
 
-async function processJSONResponse<TData = any>(
+async function processJSONResponse<
+  TData = any,
+  TMatchGraphQLSpec extends boolean = false,
+>(
   response: Response,
-): Promise<ClientResponse<TData>> {
-  const {errors, data, extensions} = await response.json<any>();
+  matchGraphQLSpec: TMatchGraphQLSpec,
+): Promise<ClientResponse<TData, TMatchGraphQLSpec>> {
+  const fullData = await response.json<any>();
+  if (matchGraphQLSpec) {
+    return fullData;
+  }
 
+  const {errors, data, extensions} = fullData;
+  // @ts-ignore
   return {
     ...getKeyValueIfValid('data', data),
     ...getKeyValueIfValid('extensions', extensions),
@@ -148,9 +158,11 @@ function generateFetch(
   };
 }
 
-function generateRequest(
+function generateRequest<TMatchGraphQLSpec extends boolean>(
   fetchFn: ReturnType<typeof generateFetch>,
+  matchGraphQLSpec: TMatchGraphQLSpec,
 ): GraphQLClient['request'] {
+  // @ts-ignore
   return async (...props) => {
     if (DEFER_OPERATION_REGEX.test(props[0])) {
       throw new Error(
@@ -166,34 +178,43 @@ function generateRequest(
       const contentType = response.headers.get('content-type') || '';
 
       if (!response.ok) {
-        return {
-          errors: {
-            networkStatusCode: status,
-            message: formatErrorMessage(statusText),
-            response,
-          },
-        };
+        const message = formatErrorMessage(statusText);
+        return matchGraphQLSpec
+          ? {errors: [{message}]}
+          : {
+              errors: {
+                networkStatusCode: status,
+                message,
+                response,
+              },
+            };
       }
 
       if (!contentType.includes(CONTENT_TYPES.json)) {
-        return {
-          errors: {
-            networkStatusCode: status,
-            message: formatErrorMessage(
-              `${UNEXPECTED_CONTENT_TYPE_ERROR} ${contentType}`,
-            ),
-            response,
-          },
-        };
+        const message = formatErrorMessage(
+          `${UNEXPECTED_CONTENT_TYPE_ERROR} ${contentType}`,
+        );
+        return matchGraphQLSpec
+          ? {errors: [{message}]}
+          : {
+              errors: {
+                networkStatusCode: status,
+                message,
+                response,
+              },
+            };
       }
 
-      return processJSONResponse(response);
+      return processJSONResponse(response, matchGraphQLSpec);
     } catch (error) {
-      return {
-        errors: {
-          message: getErrorMessage(error),
-        },
-      };
+      const message = getErrorMessage(error);
+      return matchGraphQLSpec
+        ? {errors: [{message}]}
+        : {
+            errors: {
+              message,
+            },
+          };
     }
   };
 }
@@ -272,10 +293,16 @@ function readStreamChunk(
   };
 }
 
-function createJsonResponseAsyncIterator(response: Response) {
+function createJsonResponseAsyncIterator<TMatchGraphQLSpec extends boolean>(
+  response: Response,
+  matchGraphQLSpec: TMatchGraphQLSpec,
+) {
   return {
     async *[Symbol.asyncIterator]() {
-      const processedResponse = await processJSONResponse(response);
+      const processedResponse = await processJSONResponse(
+        response,
+        matchGraphQLSpec,
+      );
 
       yield {
         ...processedResponse,
@@ -432,9 +459,11 @@ function createMultipartResponseAsyncInterator(
   };
 }
 
-function generateRequestStream(
+function generateRequestStream<TMatchGraphQLSpec extends boolean>(
   fetchFn: ReturnType<typeof generateFetch>,
+  matchGraphQLSpec: TMatchGraphQLSpec,
 ): GraphQLClient['requestStream'] {
+  // @ts-ignore
   return async (...props) => {
     if (!DEFER_OPERATION_REGEX.test(props[0])) {
       throw new Error(
@@ -457,7 +486,7 @@ function generateRequestStream(
 
       switch (true) {
         case responseContentType.includes(CONTENT_TYPES.json):
-          return createJsonResponseAsyncIterator(response);
+          return createJsonResponseAsyncIterator(response, matchGraphQLSpec);
         case responseContentType.includes(CONTENT_TYPES.multipart):
           return createMultipartResponseAsyncInterator(
             response,

packages/api-clients/graphql-client/src/graphql-client/types.ts

@@ -25,16 +25,32 @@ export interface ResponseErrors {
   response?: Response;
 }
 
+export interface SpecResponseError {
+  message: string;
+  locations?: {line: number; column: number}[];
+  path?: string[];
+  extensions?: GQLExtensions;
+}
+
 export type GQLExtensions = Record<string, any>;
 
-export interface FetchResponseBody<TData = any> {
+export interface FetchResponseBody<
+  TData = any,
+  TMatchGraphQLSpec extends boolean = false,
+> {
   data?: TData;
   extensions?: GQLExtensions;
   headers?: Headers;
+  errors?: TMatchGraphQLSpec extends true ? SpecResponseError[] : never;
 }
 
-export interface ClientResponse<TData = any> extends FetchResponseBody<TData> {
-  errors?: ResponseErrors;
+export interface ClientResponse<
+  TData = any,
+  TMatchGraphQLSpec extends boolean = false,
+> extends Omit<FetchResponseBody<TData, TMatchGraphQLSpec>, 'errors'> {
+  errors?: TMatchGraphQLSpec extends true
+    ? SpecResponseError[]
+    : ResponseErrors;
 }
 
 export interface ClientStreamResponse<TData = any>
@@ -81,6 +97,7 @@ export interface ClientOptions {
   customFetchApi?: CustomFetchApi;
   retries?: number;
   logger?: Logger;
+  matchGraphQLSpec?: boolean;
 }
 
 export interface ClientConfig {

packages/apps/shopify-api/future/flags.ts

@@ -26,6 +26,12 @@ export interface FutureFlags {
    * resolves a conflict with the default() method in that class.
    */
   customerAddressDefaultFix?: boolean;
+
+  /**
+   * When enabled, the GraphQL client will match the spec and return `errors` on the response. When disabled, the client wiill throw errors instead.
+   * @default false
+   */
+  matchGraphQLSpec?: boolean;
 }
 
 /**

packages/apps/shopify-api/lib/clients/admin/graphql/client.ts

@@ -63,6 +63,7 @@ export class GraphqlClient {
       logger: clientLoggerFactory(config),
       userAgentPrefix: getUserAgent(config),
       isTesting: config.isTesting,
+      matchGraphQLSpec: config.future?.matchGraphQLSpec,
     });
   }
 
@@ -127,7 +128,11 @@ export class GraphqlClient {
       ...(options as ApiClientRequestOptions<Operation, AdminOperations>),
     });
 
-    if (response.errors) {
+    const matchGraphQLSpec =
+      this.graphqlClass().config.future?.matchGraphQLSpec ?? false;
+
+    if (response.errors && !matchGraphQLSpec) {
+      // @ts-ignore
       const fetchResponse = response.errors.response;
 
       throwFailedRequest(response, (options?.retries ?? 0) > 0, fetchResponse);

packages/apps/shopify-app-remix/src/server/clients/admin/graphql.ts

@@ -8,11 +8,13 @@ import {AdminClientOptions} from './types';
 // TODO: This is actually just a call through to the Shopify API client, but with a different API. We should eventually
 // move this over to the library layer. While doing that, we should also allow the apiVersion to be passed into the REST
 // client request calls.
-export function graphqlClientFactory({
+export function graphqlClientFactory<
+  TMatchGraphQLSpec extends boolean = false,
+>({
   params,
   handleClientError,
   session,
-}: AdminClientOptions): GraphQLClient<AdminOperations> {
+}: AdminClientOptions): GraphQLClient<AdminOperations, TMatchGraphQLSpec> {
   return async function query(operation, options) {
     const client = new params.api.clients.Graphql({
       session,

packages/apps/shopify-app-remix/src/server/clients/admin/types.ts

@@ -25,10 +25,15 @@ export type AdminApiContext<
   Resources extends ShopifyRestResources = ShopifyRestResources,
 > =
   FeatureEnabled<ConfigArg['future'], 'removeRest'> extends true
-    ? AdminApiContextWithoutRest
-    : AdminApiContextWithRest<Resources>;
+    ? AdminApiContextWithoutRest<
+        FeatureEnabled<ConfigArg['future'], 'matchGraphQLSpec'>
+      >
+    : AdminApiContextWithRest<
+        Resources,
+        FeatureEnabled<ConfigArg['future'], 'matchGraphQLSpec'>
+      >;
 
-export interface AdminApiContextWithoutRest {
+export interface AdminApiContextWithoutRest<TMatchGraphQLSpec extends boolean> {
   /**
    * Methods for interacting with the Shopify Admin GraphQL API
    *
@@ -128,12 +133,13 @@ export interface AdminApiContextWithoutRest {
    * export const authenticate = shopify.authenticate;
    * ```
    */
-  graphql: GraphQLClient<AdminOperations>;
+  graphql: GraphQLClient<AdminOperations, TMatchGraphQLSpec>;
 }
 
 export interface AdminApiContextWithRest<
   Resources extends ShopifyRestResources = ShopifyRestResources,
-> extends AdminApiContextWithoutRest {
+  TMatchGraphQLSpec extends boolean = false,
+> extends AdminApiContextWithoutRest<TMatchGraphQLSpec> {
   /**
    * Methods for interacting with the Shopify Admin REST API
    *

packages/apps/shopify-app-remix/src/server/clients/storefront/factory.ts

@@ -4,13 +4,15 @@ import {BasicParams} from '../../types';
 
 import type {StorefrontContext} from '.';
 
-export function storefrontClientFactory({
+export function storefrontClientFactory<
+  TMatchGraphQLSpec extends boolean = false,
+>({
   params,
   session,
 }: {
   params: BasicParams;
   session: Session;
-}): StorefrontContext {
+}): StorefrontContext<TMatchGraphQLSpec> {
   const {api} = params;
 
   return {

packages/apps/shopify-app-remix/src/server/clients/storefront/types.ts

@@ -2,7 +2,7 @@ import {StorefrontOperations} from '@shopify/storefront-api-client';
 
 import {GraphQLClient} from '../types';
 
-export interface StorefrontContext {
+export interface StorefrontContext<TMatchGraphQLSpec extends boolean = false> {
   /**
    * Method for interacting with the Shopify Storefront GraphQL API
    *
@@ -74,5 +74,5 @@ export interface StorefrontContext {
    * export const authenticate = shopify.authenticate;
    * ```
    */
-  graphql: GraphQLClient<StorefrontOperations>;
+  graphql: GraphQLClient<StorefrontOperations, TMatchGraphQLSpec>;
 }

packages/apps/shopify-app-remix/src/server/clients/types.ts

@@ -32,11 +32,15 @@ export interface GraphQLQueryOptions<
 export type GraphQLResponse<
   Operation extends keyof Operations,
   Operations extends AllOperations,
-> = ResponseWithType<FetchResponseBody<ReturnData<Operation, Operations>>>;
+  TMatchGraphQLSpec extends boolean,
+> = ResponseWithType<
+  FetchResponseBody<ReturnData<Operation, Operations>, TMatchGraphQLSpec>
+>;
 
-export type GraphQLClient<Operations extends AllOperations> = <
-  Operation extends keyof Operations,
->(
+export type GraphQLClient<
+  Operations extends AllOperations,
+  TMatchGraphQLSpec extends boolean,
+> = <Operation extends keyof Operations>(
   query: Operation,
   options?: GraphQLQueryOptions<Operation, Operations>,
-) => Promise<GraphQLResponse<Operation, Operations>>;
+) => Promise<GraphQLResponse<Operation, Operations, TMatchGraphQLSpec>>;

packages/apps/shopify-app-remix/src/server/future/flags.ts

@@ -38,6 +38,12 @@ export interface FutureFlags {
    * @default false
    */
   removeRest?: boolean;
+
+  /**
+   * When enabled, the GraphQL client will match the spec and return `errors` on the response. When disabled, the client wiill throw errors instead.
+   * @default false
+   */
+  matchGraphQLSpec?: boolean;
 }
 
 // When adding new flags, use this format:
@@ -46,6 +52,11 @@ export interface ApiFutureFlags<_Future extends FutureFlagOptions> {
   // We're currently hardcoding this flag to true in our settings, so we should propagate it here
   lineItemBilling: true;
   unstable_managedPricingSupport: true;
+  /**
+   * When enabled, the GraphQL client will match the spec and return `errors` on the response. When disabled, the client wiill throw errors instead.
+   * @default false
+   */
+  matchGraphQLSpec?: boolean;
 }
 
 export type ApiConfigWithFutureFlags<Future extends FutureFlagOptions> =