feat(js-api-client): Add methods to profile request.

Author: Plopix

README.md

@@ -21,6 +21,7 @@ So far, the available helpers are:
 -   CustomerManager
 -   Subscription Contract Manager
 -   Signature Verification
+-   Profiling the requests
 
 ## Installation
 
@@ -507,6 +508,33 @@ The guard function will trigger an exception.
 
 > We let you provide the `sha256` and `jwtVerify` methods to stay agnostic of any library.
 
+## Profiling the request
+
+There is time when you want to log and see the raw queries sent to Crystallize and also the timings.
+
+```javascript
+const apiClient = createClient(
+    {
+        tenantIdentifier: 'furniture',
+    },
+    {
+        profiling: {
+            onRequest: (query, variables) => {
+                // do something with it
+                console.log(query, variables);
+            },
+            onRequestResolved: (processingTimeMs, query, variables) => {
+                // do something with it
+                console.log(processingTimeMs, query, variables);
+            },
+        },
+    },
+);
+```
+
+The queries that you get passed on those functions are strings. Computed query from JS Object used by Fetcher, Hydrater and so on.
+It's really handy for debugging and development.
+
 ## Mass Call Client
 
 Sometimes, when you have many calls to do, whether they are queries or mutations, you want to be able to manage them asynchronously. This is the purpose of the Mass Call Client. It will let you be asynchronous, managing the heavy lifting of lifecycle, retry, incremental increase or decrease of the pace, etc.

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@crystallize/js-api-client",
     "license": "MIT",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "author": "Crystallize <[email protected]> (https://crystallize.com)",
     "contributors": [
         "Sébastien Morel <[email protected]>"

src/core/client.ts

@@ -10,6 +10,15 @@ export type ClientConfiguration = {
     origin?: string;
 };
 
+type ProfilingOptions = {
+    onRequest: (query: string, variables?: VariablesType) => void;
+    onRequestResolved: (processingTimeMs: number, query: string, variables?: VariablesType) => void;
+};
+
+export type CreateClientOptions = {
+    profiling?: ProfilingOptions;
+};
+
 export type VariablesType = Record<string, any>;
 export type ApiCaller<T> = (query: string, variables?: VariablesType) => Promise<T>;
 
@@ -45,6 +54,7 @@ async function post<T>(
     query: string,
     variables?: VariablesType,
     init?: RequestInit | any | undefined,
+    profiling?: ProfilingOptions,
 ): Promise<T> {
     try {
         const commonHeaders = {
@@ -56,6 +66,11 @@ async function post<T>(
             ...authenticationHeaders(config),
         };
         const body = JSON.stringify({ query, variables });
+        let start: number = 0;
+        if (profiling) {
+            start = Date.now();
+            profiling.onRequest(query, variables);
+        }
 
         const response = await fetch(path, {
             ...init,
@@ -64,6 +79,10 @@ async function post<T>(
             body,
         });
 
+        if (profiling) {
+            const ms = Date.now() - start;
+            profiling.onRequestResolved(ms, query, variables);
+        }
         if (response.ok && 204 === response.status) {
             return <T>{};
         }
@@ -93,34 +112,26 @@ async function post<T>(
     }
 }
 
-function createApiCaller(uri: string, configuration: ClientConfiguration): ApiCaller<any> {
-    /**
-     * Call a crystallize. Will automatically handle access tokens
-     * @param query The GraphQL query
-     * @param variables Variables to inject into query.
-     */
+function createApiCaller(
+    uri: string,
+    configuration: ClientConfiguration,
+    options?: CreateClientOptions,
+): ApiCaller<any> {
     return function callApi<T>(query: string, variables?: VariablesType): Promise<T> {
-        return post<T>(uri, configuration, query, variables);
+        return post<T>(uri, configuration, query, variables, undefined, options?.profiling);
     };
 }
 
-/**
- * Create one api client for each api endpoint Crystallize offers (catalogue, search, order, subscription, pim).
- *
- * @param configuration
- * @returns ClientInterface
- */
-export function createClient(configuration: ClientConfiguration): ClientInterface {
+export function createClient(configuration: ClientConfiguration, options?: CreateClientOptions): ClientInterface {
     const identifier = configuration.tenantIdentifier;
     const origin = configuration.origin || '.crystallize.com';
     const apiHost = (path: string[], prefix: 'api' | 'pim' = 'api') => `https://${prefix}${origin}/${path.join('/')}`;
-
     return {
-        catalogueApi: createApiCaller(apiHost([identifier, 'catalogue']), configuration),
-        searchApi: createApiCaller(apiHost([identifier, 'search']), configuration),
-        orderApi: createApiCaller(apiHost([identifier, 'orders']), configuration),
-        subscriptionApi: createApiCaller(apiHost([identifier, 'subscriptions']), configuration),
-        pimApi: createApiCaller(apiHost(['graphql'], 'pim'), configuration),
+        catalogueApi: createApiCaller(apiHost([identifier, 'catalogue']), configuration, options),
+        searchApi: createApiCaller(apiHost([identifier, 'search']), configuration, options),
+        orderApi: createApiCaller(apiHost([identifier, 'orders']), configuration, options),
+        subscriptionApi: createApiCaller(apiHost([identifier, 'subscriptions']), configuration, options),
+        pimApi: createApiCaller(apiHost(['graphql'], 'pim'), configuration, options),
         config: {
             tenantId: configuration.tenantId,
             tenantIdentifier: configuration.tenantIdentifier,

tests/catalogue-profiled.test.js

@@ -0,0 +1,71 @@
+const { createClient, createCatalogueFetcher } = require('../dist/index.js');
+const { VariableType } = require('json-to-graphql-query');
+
+test('Test with Profiling 1 ', async () => {
+    const variables = {
+        language: 'en',
+        path: '/shop/chairs/bamboo-chair',
+    };
+
+    const expectedQuery = `query ($language: String!, $path: String!) { catalogue (language: $language, path: $path) { ... on Product { name } } }`;
+
+    let profiledQuery = {};
+
+    const apiClient = createClient(
+        {
+            tenantIdentifier: 'furniture',
+        },
+        {
+            profiling: {
+                onRequest: (query, variables) => {
+                    profiledQuery = {
+                        ...profiledQuery,
+                        onRequest: {
+                            query,
+                            variables,
+                        },
+                    };
+                },
+                onRequestResolved: (processingTimeMs, query, variables) => {
+                    profiledQuery = {
+                        ...profiledQuery,
+                        onRequestResolved: {
+                            processingTimeMs,
+                            query,
+                            variables,
+                        },
+                    };
+                },
+            },
+        },
+    );
+
+    const fetcher = createCatalogueFetcher(apiClient);
+    const response = await fetcher(
+        {
+            __variables: {
+                language: 'String!',
+                path: 'String!',
+            },
+            catalogue: {
+                __args: {
+                    language: new VariableType('language'),
+                    path: new VariableType('path'),
+                },
+                __on: {
+                    __typeName: 'Product',
+                    name: true,
+                },
+            },
+        },
+        variables,
+    );
+
+    expect(response.catalogue.name).toBe('Bamboo Chair');
+    expect(profiledQuery.onRequest.query).toBe(expectedQuery);
+    expect(profiledQuery.onRequest.variables).toBe(variables);
+
+    expect(profiledQuery.onRequestResolved.query).toBe(expectedQuery);
+    expect(profiledQuery.onRequestResolved.variables).toBe(variables);
+    expect(profiledQuery.onRequestResolved.processingTimeMs).toBeGreaterThan(0);
+});