@avantstay/graphql-ts-client 10.6.0 → 10.8.0

package/dist/endpoint.d.ts

@@ -1,13 +1,13 @@
-import { C as ClientConfig, I as IResponseListener, E as Endpoint } from './types-4ecbabdf.js';
+import { C as ClientConfig, I as IResponseListener, E as Endpoint } from './types-85e628f6.js';
 
-declare const getApiEndpointCreator: (apiConfig: {
-    getClient: () => ClientConfig;
-    responseListeners: IResponseListener[];
-    typesTree: any;
-    maxAge: number;
-    verbose: boolean;
-    formatGraphQL: any;
-    errorsParser?: ((errors: any[]) => any) | undefined;
+declare const getApiEndpointCreator: (apiConfig: {
+    getClient: () => ClientConfig;
+    responseListeners: IResponseListener[];
+    typesTree: any;
+    maxAge: number;
+    verbose: boolean;
+    formatGraphQL: any;
+    errorsParser?: ((errors: any[]) => any) | undefined;
 }) => <I = any, O = any, E = any>(kind: 'mutation' | 'query', queryName: string) => Endpoint<I, O, E>;
 
 export { getApiEndpointCreator };

package/dist/endpoint.js

@@ -603,19 +603,30 @@ function jsonToGraphQLQuery(param) {
     var alias = jsonQuery.__alias;
     var newJsonQuery = cloneDeep((0, import_omit.default)(jsonQuery, [
         "__alias",
-        "__headers"
+        "__headers",
+        "__url"
     ]));
     extractVariables({
         jsonQuery: _defineProperty({}, queryName, newJsonQuery),
         variables: variablesData,
         parentType: kind === "query" ? typesTree.Query : typesTree.Mutation
     });
-    var variablesQuery = Object.keys(variablesData).length ? "(".concat(entries(variablesData).map(function(param) {
+    var variableItems = Object.values(variablesData).reduce(function(variablesObj, variables2) {
+        variables2.forEach(function(variable, index) {
+            var name = variable.update(variables2.length > 1 ? index : void 0);
+            variablesObj[name] = {
+                type: variable.type,
+                value: variable.value
+            };
+        });
+        return variablesObj;
+    }, {});
+    var variablesQuery = Object.keys(variableItems).length ? "(".concat(entries(variableItems).map(function(param) {
         var _param = _slicedToArray(param, 2), queryName2 = _param[0], type = _param[1].type;
         return "$".concat(queryName2, ": ").concat(type);
     }).join(", "), ")") : "";
     var query = "".concat(kind, " ").concat(alias || queryName).concat(variablesQuery, " { ").concat(alias ? "".concat(alias, ":") : "").concat(queryName).concat(toGraphql(newJsonQuery), " }");
-    var variables = fromEntries(entries(variablesData).map(function(param) {
+    var variables = fromEntries(entries(variableItems).map(function(param) {
         var _param = _slicedToArray(param, 2), k = _param[0], v = _param[1];
         return [
             k,
@@ -633,14 +644,22 @@ function extractVariables(param) {
     if (jsonQuery.__args) {
         Object.keys(jsonQuery.__args).forEach(function(k) {
             if (typeof jsonQuery.__args[k] === "string" && jsonQuery.__args[k].startsWith(VAR_PREFIX)) return;
-            var variableName = "".concat(k, "_").concat(Math.random().toString(36).substr(2, 4));
-            if (jsonQuery.__args[k] !== void 0) {
-                variables[variableName] = {
-                    type: parentType.__args[k],
-                    value: jsonQuery.__args[k]
-                };
-                jsonQuery.__args[k] = "".concat(VAR_PREFIX, "$").concat(variableName);
+            if (jsonQuery.__args[k] === void 0) return;
+            var variableName = k;
+            if (!variables[variableName]) {
+                variables[variableName] = [];
             }
+            variables[variableName].push({
+                name: variableName,
+                type: parentType.__args[k],
+                value: jsonQuery.__args[k],
+                update: function(index) {
+                    var name = "".concat(variableName).concat(index !== void 0 ? "_".concat(index) : "");
+                    jsonQuery.__args[k] = "".concat(VAR_PREFIX, "$").concat(name);
+                    return name;
+                }
+            });
+            jsonQuery.__args[k] = VAR_PREFIX;
         });
     }
     Object.keys(jsonQuery).filter(function(k) {
@@ -705,11 +724,13 @@ var getApiEndpointCreator = function(apiConfig) {
     return function(kind, queryName) {
         var rawEndpoint = function() {
             var _ref = _asyncToGenerator(function(failureMode, jsonQuery) {
-                var _jsonQuery___alias, alias, _jsonQuery___retry, shouldRetry, _jsonQuery___headers, requestHeaders, _jsonToGraphQLQuery, query, variables, start, logOptions, responseListenerData, _ref, data, errors, warnings, headers, status, response, error;
+                var clientConfig, _jsonQuery___alias, alias, _jsonQuery___url, url, _jsonQuery___retry, shouldRetry, _jsonQuery___headers, requestHeaders, _jsonToGraphQLQuery, query, variables, start, logOptions, responseListenerData, _ref, data, errors, warnings, headers, status, response, error;
                 return __generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
+                            clientConfig = apiConfig.getClient();
                             alias = (_jsonQuery___alias = jsonQuery === null || jsonQuery === void 0 ? void 0 : jsonQuery.__alias) !== null && _jsonQuery___alias !== void 0 ? _jsonQuery___alias : queryName;
+                            url = (_jsonQuery___url = jsonQuery === null || jsonQuery === void 0 ? void 0 : jsonQuery.__url) !== null && _jsonQuery___url !== void 0 ? _jsonQuery___url : clientConfig.url;
                             shouldRetry = (_jsonQuery___retry = jsonQuery === null || jsonQuery === void 0 ? void 0 : jsonQuery.__retry) !== null && _jsonQuery___retry !== void 0 ? _jsonQuery___retry : true;
                             requestHeaders = (_jsonQuery___headers = jsonQuery === null || jsonQuery === void 0 ? void 0 : jsonQuery.__headers) !== null && _jsonQuery___headers !== void 0 ? _jsonQuery___headers : {};
                             _jsonToGraphQLQuery = jsonToGraphQLQuery({
@@ -746,7 +767,9 @@ var getApiEndpointCreator = function(apiConfig) {
                                     shouldRetry: shouldRetry,
                                     failureMode: failureMode,
                                     queryName: alias,
-                                    client: apiConfig.getClient(),
+                                    client: _objectSpreadProps(_objectSpread({}, clientConfig), {
+                                        url: url
+                                    }),
                                     requestHeaders: requestHeaders,
                                     query: query,
                                     variables: variables,

package/dist/index.d.ts

@@ -1,24 +1,24 @@
 import { PathLike } from 'fs';
-export { C as ClientConfig, c as DeepReplace, D as Defined, E as Endpoint, G as GraphQLClientError, I as IResponseListener, J as JsonOutput, L as LogInfo, M as Maybe, P as Projection, d as RawEndpoint, b as Replacement, R as ResponseData, a as ResponseListenerInfo, U as Unpacked } from './types-4ecbabdf.js';
+export { C as ClientConfig, c as DeepReplace, D as Defined, E as Endpoint, G as GraphQLClientError, I as IResponseListener, J as JsonOutput, L as LogInfo, M as Maybe, P as Projection, d as RawEndpoint, b as Replacement, R as ResponseData, a as ResponseListenerInfo, U as Unpacked } from './types-85e628f6.js';
 
-type IClientOptions = {
-    output?: PathLike;
-    clientName?: string;
-    headers?: {
-        [key: string]: string;
-    };
-    introspectionEndpoint?: string;
-    endpoint: string;
-    verbose?: boolean;
-    formatGraphQL?: boolean;
-    skipCache?: boolean;
-    errorsParser?: (errors: any[]) => any;
-};
-type Client = {
-    typings: string;
-    js: string;
-};
-declare function generateTypescriptClient({ introspectionEndpoint, ...options }: IClientOptions): Promise<Client>;
+type IClientOptions = {
+    output?: PathLike;
+    clientName?: string;
+    headers?: {
+        [key: string]: string;
+    };
+    introspectionEndpoint?: string;
+    endpoint: string;
+    verbose?: boolean;
+    formatGraphQL?: boolean;
+    skipCache?: boolean;
+    errorsParser?: (errors: any[]) => any;
+};
+type Client = {
+    typings: string;
+    js: string;
+};
+declare function generateTypescriptClient({ introspectionEndpoint, ...options }: IClientOptions): Promise<Client>;
 declare function generateTypescriptClientFromSDL(SDL: string, options: IClientOptions): Client;
 
 export { generateTypescriptClient, generateTypescriptClientFromSDL };

package/dist/index.js

@@ -477,7 +477,7 @@ var import_case = __toESM(require("case"));
 var esbuild = __toESM(require("esbuild"));
 var fs = __toESM(require("fs"));
 var import_graphql = require("graphql");
-var import_lodash = require("lodash");
+var import_kebabCase = __toESM(require("lodash/kebabCase"));
 var import_orderBy = __toESM(require("lodash/orderBy"));
 var import_set = __toESM(require("lodash/set"));
 var import_md5 = __toESM(require("md5"));
@@ -487,7 +487,7 @@ var prettier = __toESM(require("prettier"));
 // package.json
 var package_default = {
     name: "@avantstay/graphql-ts-client",
-    version: "10.6.0",
+    version: "10.8.0",
     description: "GraphQL Typescript Client Generator",
     author: "Wellington Guimaraes",
     license: "MIT",
@@ -639,7 +639,7 @@ function gqlFieldToTypescript(field, param) {
                 selection: false
             });
         });
-        fieldTypeDefinition = "{ __headers?: {[key: string]: string}; __retry?: boolean; __alias?: string; __args".concat(fieldsOnArgs.every(function(arg) {
+        fieldTypeDefinition = "{ __headers?: {[key: string]: string}; __retry?: boolean; __alias?: string; __url?: string; __args".concat(fieldsOnArgs.every(function(arg) {
             return arg.isOptional;
         }) ? "?" : "", ": { ").concat(fieldsOnArgs.map(function(arg) {
             return arg.code;
@@ -679,7 +679,7 @@ function gqlEndpointToCode(kind, endpoint, codeOutputType) {
         selection: true
     });
     var argsType = endpoint.args && endpoint.args.length ? getArgsType(endpoint) : null;
-    var inputType = "{\n    __headers?: {[key: string]: string};\n    __retry?: boolean;\n    __alias?: string;\n    ".concat(argsType ? "__args".concat(argsType.optional ? "?" : "", ": ").concat(argsType.alias) : "", "\n  }").concat(selectionType ? " & ".concat(selectionType) : "");
+    var inputType = "{\n    __headers?: {[key: string]: string};\n    __retry?: boolean;\n    __alias?: string;\n    __url?: string;\n    ".concat(argsType ? "__args".concat(argsType.optional ? "?" : "", ": ").concat(argsType.alias) : "", "\n  }").concat(selectionType ? " & ".concat(selectionType) : "");
     var outputType = gqlTypeToTypescript(endpoint.type, {
         required: true
     });
@@ -867,7 +867,7 @@ function _fetchIntrospection() {
             switch(_state.label){
                 case 0:
                     endpoint = param.endpoint, headers = param.headers;
-                    introspectionCacheFileName = "gql-ts-client__introspection__".concat((0, import_lodash.kebabCase)(endpoint), ".json");
+                    introspectionCacheFileName = "gql-ts-client__introspection__".concat((0, import_kebabCase.default)(endpoint), ".json");
                     introspectionCacheFilePath = import_path.default.resolve(tempDir, introspectionCacheFileName);
                     loadedFromCache = false;
                     return [
@@ -878,7 +878,7 @@ function _fetchIntrospection() {
                             headers: _objectSpread({
                                 "Content-Type": "application/json"
                             }, headers)
-                        }).catch(function() {
+                        }).catch(function(e) {
                             var errorMessage = "The GraphQL introspection request failed (".concat(endpoint, ")");
                             if (fs.existsSync(introspectionCacheFilePath)) {
                                 var cachedSchema = JSON.parse(fs.readFileSync(introspectionCacheFilePath, {
@@ -890,6 +890,7 @@ function _fetchIntrospection() {
                                     data: cachedSchema
                                 };
                             } else {
+                                console.error(e);
                                 return Promise.reject(errorMessage);
                             }
                         })

package/dist/types-85e628f6.d.ts

@@ -0,0 +1,69 @@
+type Maybe<T> = null | undefined | T;
+type Defined<T> = Exclude<T, undefined>;
+type ResponseData = {
+    data: any;
+    warnings: any;
+    headers: any;
+    status?: number;
+    errors: {
+        message: string;
+    }[];
+};
+type ResponseListenerInfo = {
+    queryName: string;
+    query: string;
+    variables: any;
+    response: ResponseData;
+};
+type IResponseListener = (info: ResponseListenerInfo) => void | Promise<void>;
+type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+type Projection<Selection, Base, E = never> = Base extends Array<any> ? ArrayElement<Base> extends Date | string | number | boolean | null | undefined | E ? ArrayElement<Base>[] : Projection<Defined<Selection>, ArrayElement<Base>, E>[] : Base extends Date | string | number | boolean | null | E ? Selection extends undefined ? Base | undefined : Base : {
+    [k in keyof Selection & keyof Base]: Selection[k] extends boolean ? Base[k] : Base[k] extends Array<infer A> ? Projection<Defined<Selection[k]>, A, E>[] : Projection<Defined<Selection[k]>, Base[k], E>;
+};
+type Unpacked<T> = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise<infer U> ? U : T;
+type Replacement<M extends [any, any], T> = M extends any ? ([T] extends [M[0]] ? M[1] : never) : never;
+type DeepReplace<T, Ignore, M extends [any, any]> = {
+    [P in keyof T]: T[P] extends M[0] ? T[P] extends Ignore ? T[P] extends object ? DeepReplace<T[P], Ignore, M> : T[P] : Replacement<M, T[P]> : T[P] extends object ? DeepReplace<T[P], Ignore, M> : T[P];
+};
+type RawEndpoint<I, O, E> = <S extends I>(jsonQuery?: S) => Promise<{
+    data: Projection<S, O, E>;
+    errors: any[];
+    warnings: any[];
+    headers: any;
+    status: any;
+}>;
+type JsonOutput<O, ToBeIgnored> = DeepReplace<O, ToBeIgnored, [string | Date, string]>;
+type Endpoint<I, O, E> = (<S extends I>(jsonQuery?: S) => Promise<Projection<S, JsonOutput<O, E>, E>>) & {
+    memo: <S extends I>(jsonQuery?: S) => Promise<Projection<S, JsonOutput<O, E>, E>>;
+    memoRaw: RawEndpoint<I, JsonOutput<O, E>, E>;
+    raw: RawEndpoint<I, JsonOutput<O, E>, E>;
+};
+type ClientConfig = {
+    url: string;
+    headers: {
+        [key: string]: string;
+    };
+    retryConfig: {
+        max: number;
+        waitBeforeRetry?: number;
+        before: IResponseListener;
+    };
+};
+type LogInfo = {
+    query: string;
+    variables: any;
+    formatGraphQL: any;
+    kind: string;
+    queryName: string;
+    response?: any;
+    error?: Error;
+    duration: number;
+};
+declare class GraphQLClientError extends Error {
+    responseData: ResponseData;
+    constructor(responseData: ResponseData);
+    get message(): string;
+    get response(): ResponseData;
+}
+
+export { ClientConfig as C, Defined as D, Endpoint as E, GraphQLClientError as G, IResponseListener as I, JsonOutput as J, LogInfo as L, Maybe as M, Projection as P, ResponseData as R, Unpacked as U, ResponseListenerInfo as a, Replacement as b, DeepReplace as c, RawEndpoint as d };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avantstay/graphql-ts-client",
-  "version": "10.6.0",
+  "version": "10.8.0",
   "description": "GraphQL Typescript Client Generator",
   "author": "Wellington Guimaraes",
   "license": "MIT",
@@ -8,8 +8,8 @@
   "typings": "dist/index.d.ts",
   "scripts": {
     "build": "tsup src/index.ts src/endpoint.ts --dts",
-    "test": "cross-env GQL_CLIENT_DIST_PATH='.' jest --watch"
-
+    "test": "cross-env GQL_CLIENT_DIST_PATH='.' jest --watch",
+    "prepublishOnly": "yarn build"
   },
   "files": [
     "dist",

package/src/__snapshots__/generateTypescriptClient.test.ts.snap

@@ -29,7 +29,7 @@ __export(exports, {
   client: () => client,
   default: () => stdin_default
 });
-var import_endpoint = __toModule(require("../dist/endpoint"));
+var import_endpoint = __toModule(require("./endpoint"));
 const formatGraphQL = (query) => query;
 const typesTree = {};
 let verbose = false;
@@ -79,7 +79,7 @@ var stdin_default = client;
 ",
   "typings": "// noinspection TypeScriptUnresolvedVariable, ES6UnusedImports, JSUnusedLocalSymbols, TypeScriptCheckImport
 import { DeepRequired } from "ts-essentials"
-import { Maybe, IResponseListener, Endpoint } from "../dist"
+import { Maybe, IResponseListener, Endpoint } from "."
 
 // Scalars
 export type IDate = string | Date
@@ -119,6 +119,7 @@ export declare const client: {
         __headers?: { [key: string]: string }
         __retry?: boolean
         __alias?: string
+        __url?: string
       },
       string,
       AllEnums

package/src/__testClient.d.ts

@@ -1,6 +1,6 @@
 // noinspection TypeScriptUnresolvedVariable, ES6UnusedImports, JSUnusedLocalSymbols, TypeScriptCheckImport
 import { DeepRequired } from "ts-essentials"
-import { Maybe, IResponseListener, Endpoint } from "../dist"
+import { Maybe, IResponseListener, Endpoint } from "."
 
 // Scalars
 export type IDate = string | Date
@@ -107,6 +107,7 @@ export declare const myApiClient: {
         __headers?: { [key: string]: string }
         __retry?: boolean
         __alias?: string
+        __url?: string
       } & BookSelection,
       DeepRequired<Book[]>,
       AllEnums
@@ -116,6 +117,7 @@ export declare const myApiClient: {
         __headers?: { [key: string]: string }
         __retry?: boolean
         __alias?: string
+        __url?: string
         __args?: BooksWithOptionalParamsArgs
       } & BookSelection,
       DeepRequired<Book[]>,
@@ -126,6 +128,7 @@ export declare const myApiClient: {
         __headers?: { [key: string]: string }
         __retry?: boolean
         __alias?: string
+        __url?: string
         __args: BooksWithRequiredParamsArgs
       } & BookSelection,
       DeepRequired<Book[]>,
@@ -136,6 +139,7 @@ export declare const myApiClient: {
         __headers?: { [key: string]: string }
         __retry?: boolean
         __alias?: string
+        __url?: string
         __args: FailingQueryArgs
       },
       string,

package/src/__testClient.js

@@ -26,7 +26,7 @@ __export(exports, {
   default: () => stdin_default,
   myApiClient: () => myApiClient
 });
-var import_endpoint = __toModule(require("../dist/endpoint"));
+var import_endpoint = __toModule(require("./endpoint"));
 var import_standalone = __toModule(require("prettier/standalone"));
 var import_parser_graphql = __toModule(require("prettier/parser-graphql"));
 const formatGraphQL = (query) => (0, import_standalone.format)(query, { parser: "graphql", plugins: [import_parser_graphql.default] });

package/src/endpoint.ts

@@ -32,7 +32,10 @@ export const getApiEndpointCreator =
       headers: any
       status: any
     }> => {
+      const clientConfig = apiConfig.getClient()
+
       const alias = (jsonQuery as any)?.__alias ?? queryName
+      const url = (jsonQuery as any)?.__url ?? clientConfig.url
       const shouldRetry = (jsonQuery as any)?.__retry ?? true
       const requestHeaders = (jsonQuery as any)?.__headers ?? {}
       const { query, variables } = jsonToGraphQLQuery({ kind, queryName, jsonQuery, typesTree: apiConfig.typesTree })
@@ -58,7 +61,7 @@ export const getApiEndpointCreator =
           shouldRetry,
           failureMode,
           queryName: alias,
-          client: apiConfig.getClient(),
+          client: {...clientConfig, url },
           requestHeaders,
           query,
           variables,

package/src/generateTypescriptClient.ts

@@ -17,7 +17,7 @@ import {
   IntrospectionType,
   Source,
 } from 'graphql'
-import { kebabCase } from 'lodash'
+import kebabCase from 'lodash/kebabCase'
 import orderBy from 'lodash/orderBy'
 import set from 'lodash/set'
 import md5 from 'md5'
@@ -108,7 +108,7 @@ function gqlFieldToTypescript(
       })
     )
 
-    fieldTypeDefinition = `{ __headers?: {[key: string]: string}; __retry?: boolean; __alias?: string; __args${
+    fieldTypeDefinition = `{ __headers?: {[key: string]: string}; __retry?: boolean; __alias?: string; __url?: string; __args${
       fieldsOnArgs.every(arg => arg.isOptional) ? '?' : ''
     }: { ${fieldsOnArgs.map(arg => arg.code).join(', ')} }}${fieldTypeDefinition ? ` & ${fieldTypeDefinition}` : ''}`
   }
@@ -148,6 +148,7 @@ function gqlEndpointToCode(kind: 'mutation' | 'query', endpoint: IntrospectionFi
     __headers?: {[key: string]: string};
     __retry?: boolean;
     __alias?: string;
+    __url?: string;
     ${argsType ? `__args${argsType.optional ? '?' : ''}: ${argsType.alias}` : ''}
   }${selectionType ? ` & ${selectionType}` : ''}`
 
@@ -500,7 +501,7 @@ async function fetchIntrospection({ endpoint, headers }: FetchIntrospectionOptio
         },
       }
     )
-    .catch(() => {
+    .catch((e) => {
       const errorMessage = `The GraphQL introspection request failed (${endpoint})`
       if (fs.existsSync(introspectionCacheFilePath)) {
         const cachedSchema = JSON.parse(fs.readFileSync(introspectionCacheFilePath, { encoding: 'utf8' }))
@@ -508,6 +509,7 @@ async function fetchIntrospection({ endpoint, headers }: FetchIntrospectionOptio
         console.warn(`Successfully restored from local cache.`)
         return { data: cachedSchema }
       } else {
+        console.error(e)
         return Promise.reject(errorMessage)
       }
     })

package/src/jsonToGraphQLQuery.test.ts

@@ -38,8 +38,14 @@ describe('jsonToGraphQLQuery', () => {
       __args: {
         foo: 'Bar',
       },
-
       something: true,
+      another: {
+        __args: {
+          foo: 'Lorem ipsum',
+          bar: 'Dolor sit amet',
+        },
+        zeta: true,
+      },
     }
 
     const response = jsonToGraphQLQuery({
@@ -53,14 +59,24 @@ describe('jsonToGraphQLQuery', () => {
               __args: {
                 foo: 'UUID!',
               },
+              something: 'Boolean!',
+              another: {
+                __args: {
+                  foo: 'String!',
+                  bar: 'String!',
+                },
+                zeta: 'Int!',
+              },
             }
           },
         },
       },
     })
 
-    Object.keys(response.variables).forEach(varName => {
-      expect(response.query.split(varName).length - 1).toBeGreaterThanOrEqual(2) //every variable name should be present at least 2 times
+    expect(response.variables).toEqual({
+      foo_0: 'Bar',
+      foo_1: 'Lorem ipsum',
+      bar: 'Dolor sit amet',
     })
   })
 })

package/src/jsonToGraphQLQuery.ts

@@ -7,6 +7,9 @@ const fromEntries: (arr: [string, any][]) => { [key: string]: any } = require('l
 const entries: (obj: { [key: string]: any }) => [string, any][] = require('lodash/toPairs')
 const cloneDeep = require('lodash/cloneDeep')
 
+type ExtractedVariables = Record<string, (Variable & { name: string; update: (index?: number) => string })[]>
+type Variable = { type: any; value: any }
+
 export function jsonToGraphQLQuery({
   kind,
   queryName,
@@ -18,9 +21,9 @@ export function jsonToGraphQLQuery({
   jsonQuery: any
   typesTree: any
 }) {
-  const variablesData = {} as any
+  const variablesData = {} as ExtractedVariables
   const alias = jsonQuery.__alias
-  const newJsonQuery = cloneDeep(omit(jsonQuery, ['__alias', '__headers']))
+  const newJsonQuery = cloneDeep(omit(jsonQuery, ['__alias', '__headers', '__url']))
 
   extractVariables({
     jsonQuery: { [queryName]: newJsonQuery },
@@ -28,8 +31,17 @@ export function jsonToGraphQLQuery({
     parentType: kind === 'query' ? typesTree.Query : typesTree.Mutation,
   })
 
-  const variablesQuery = Object.keys(variablesData).length
-    ? `(${entries(variablesData)
+  const variableItems = Object.values(variablesData).reduce((variablesObj, variables) => {
+    variables.forEach((variable, index) => {
+      const name = variable.update(variables.length > 1 ? index : undefined)
+      variablesObj[name] = { type: variable.type, value: variable.value }
+    })
+
+    return variablesObj
+  }, {} as Record<string, Variable>)
+
+  const variablesQuery = Object.keys(variableItems).length
+    ? `(${entries(variableItems)
         .map(([queryName, { type }]: any) => `$${queryName}: ${type}`)
         .join(', ')})`
     : ''
@@ -37,7 +49,7 @@ export function jsonToGraphQLQuery({
   const query = `${kind} ${alias || queryName}${variablesQuery} { ${alias ? `${alias}:` : ''}${queryName}${toGraphql(
     newJsonQuery
   )} }`
-  const variables = fromEntries(entries(variablesData).map(([k, v]: any) => [k, v.value]))
+  const variables = fromEntries(entries(variableItems).map(([k, v]: any) => [k, v.value]))
 
   return {
     query,
@@ -45,22 +57,41 @@ export function jsonToGraphQLQuery({
   }
 }
 
-function extractVariables({ jsonQuery, variables, parentType }: { jsonQuery: any; variables: any; parentType: any }) {
+function extractVariables({
+  jsonQuery,
+  variables,
+  parentType,
+}: {
+  jsonQuery: any
+  variables: ExtractedVariables
+  parentType: any
+}) {
   if (!parentType) return
 
   if (jsonQuery.__args) {
     Object.keys(jsonQuery.__args).forEach(k => {
       if (typeof jsonQuery.__args[k] === 'string' && jsonQuery.__args[k].startsWith(VAR_PREFIX)) return
+      if (jsonQuery.__args[k] === undefined) return
 
-      const variableName = `${k}_${Math.random().toString(36).substr(2, 4)}`
+      const variableName = k
 
-      if (jsonQuery.__args[k] !== undefined) {
-        variables[variableName] = {
-          type: parentType.__args[k],
-          value: jsonQuery.__args[k],
-        }
-        jsonQuery.__args[k] = `${VAR_PREFIX}$${variableName}`
+      if (!variables[variableName]) {
+        variables[variableName] = []
       }
+
+      variables[variableName].push({
+        name: variableName,
+        type: parentType.__args[k],
+        value: jsonQuery.__args[k],
+        update: (index?: number) => {
+          const name = `${variableName}${index !== undefined ? `_${index}` : ''}`
+          jsonQuery.__args[k] = `${VAR_PREFIX}$${name}`
+
+          return name
+        },
+      })
+
+      jsonQuery.__args[k] = VAR_PREFIX
     })
   }