feat(packages/gqty): support operationName (#1276)

* feat(package/gqty): support operationName

* chore: changeset

* chore(lint): use guard clauses

* chore: remove unused file(s)

* feat(packages/gqty): add operationName option

* chore(lint): types and imports

* chore(packages/gqty): fix test for node 19

* chore: revert unnecessary changes

* chore(lint): consistent generic types

* chore: update to match HEAD version

* feat(docs): add operation name

* chore(docs): rearrange sections

.changeset/cool-wolves-own.md

@@ -0,0 +1,5 @@
+---
+'gqty': minor
+---
+
+feat(pacakge/gqty): support GraphQL operation names

internal/website/docs/client/fetching-data.mdx

@@ -3,7 +3,7 @@ id: fetching-data
 title: Fetching data
 ---
 
-#### Prerequisites
+### Prerequisites
 
 Make sure you've completed [Getting Started](/docs/getting-started) first.
 
@@ -60,7 +60,66 @@ if (possibleData instanceof Promise) {
 }
 ```
 
-## track
+## Refetching data
+
+### refetch
+
+A special function that accepts object proxies, or functions.
+
+When dealing with object proxies, it recovers **all** the history of the specific object down the tree of selections,
+and refetchs them, returning the same object back after all the resolutions are done.
+
+On the other hand, when used with a **function**, it calls the function (using the core scheduler) ignoring possible nulls in the middle in the first pass,
+and returns whatever the function gave back as a promise.
+
+```ts
+import { query, refetch, resolved } from '../gqty';
+
+// ...
+
+const data = await resolved(() => {
+  const user = query.user;
+
+  if (user) {
+    return {
+      id: user.name,
+      name: user.name,
+    };
+  }
+  return null;
+});
+
+// Later...
+
+// It will refetch 'id' & 'name' of 'query.user'
+const refetchedUser = await refetch(query.user);
+```
+
+## Advanced Usages
+
+### Operation name
+
+A custom operation name can be added to GraphQL queries, mutations and subscriptions.
+
+This is useful when mocking for unit tests, and advanced server logics.
+
+```ts
+import { query, resolved, inlineResolved } from '../gqty';
+
+resolved(() => query.helloWorld, { operationName: 'MyQuery' });
+
+inlineResolved(() => query.helloWorld, { operationName: 'MyQuery' });
+```
+
+Both `resolved` and `inlineResolved` above will generate the following query:
+
+```graphql
+query MyQuery {
+  helloWorld
+}
+```
+
+### track
 
 The function `track` accepts a callback that gets automatically called every time related data arrives or related cache changes, particularly useful for subscriptions, but it also works for queries.
 
@@ -80,7 +139,7 @@ setTimeout(() => {
 }, 5000);
 ```
 
-### track options
+#### track options
 
 ```ts
 track(
@@ -103,42 +162,7 @@ track(
 );
 ```
 
-## Refetching data
-
-### refetch
-
-A special function that accepts object proxies, or functions.
-
-When dealing with object proxies, it recovers **all** the history of the specific object down the tree of selections,
-and refetchs them, returning the same object back after all the resolutions are done.
-
-On the other hand, when used with a **function**, it calls the function (using the core scheduler) ignoring possible nulls in the middle in the first pass,
-and returns whatever the function gave back as a promise.
-
-```ts
-import { query, refetch, resolved } from '../gqty';
-
-// ...
-
-const data = await resolved(() => {
-  const user = query.user;
-
-  if (user) {
-    return {
-      id: user.name,
-      name: user.name,
-    };
-  }
-  return null;
-});
-
-// Later...
-
-// It will refetch 'id' & 'name' of 'query.user'
-const refetchedUser = await refetch(query.user);
-```
-
-## Using the Scheduler directly
+### The scheduler
 
 GQty exposes the Scheduler API, which is used by the helper functions above.
 
@@ -155,7 +179,7 @@ async function Example() {
 }
 ```
 
-### Error handling
+#### Error handling
 
 The scheduler resolves to a promise of a `GQtyError`:
 

packages/gqty/src/Accessor/index.ts

@@ -13,8 +13,8 @@ import {
   decycle,
   isInteger,
   isObject,
-  retrocycle,
   isObjectWithType,
+  retrocycle,
 } from '../Utils';
 
 const ProxySymbol = Symbol('gqty-proxy');
@@ -97,9 +97,9 @@ export interface AssignSelections {
 
 export interface AccessorCreators<
   GeneratedSchema extends {
-    query: {};
-    mutation: {};
-    subscription: {};
+    query: object;
+    mutation: object;
+    subscription: object;
   }
 > {
   createAccessor: (
@@ -123,9 +123,9 @@ export interface AccessorCreators<
 
 export function createAccessorCreators<
   GeneratedSchema extends {
-    query: {};
-    mutation: {};
-    subscription: {};
+    query: object;
+    mutation: object;
+    subscription: object;
   } = never
 >(innerState: InnerClientState): AccessorCreators<GeneratedSchema> {
   const {

packages/gqty/src/Client/client.ts

@@ -21,6 +21,7 @@ import { EventHandler } from '../Events';
 import { createPrefetch, Prefetch } from '../Helpers/prefetch';
 import { createRefetch, Refetch } from '../Helpers/refetch';
 import { createSSRHelpers, HydrateCache, PrepareRender } from '../Helpers/ssr';
+import { createTracker, Track } from '../Helpers/track';
 import { createInterceptorManager, InterceptorManager } from '../Interceptor';
 import {
   createNormalizationHandler,
@@ -42,7 +43,6 @@ import {
   Resolvers,
   RetryOptions,
 } from './resolvers';
-import { createTracker, Track } from '../Helpers/track';
 
 export interface InnerClientState {
   allowCache: boolean;
@@ -186,9 +186,9 @@ export interface Mutate<
 
 export interface GQtyClient<
   GeneratedSchema extends {
-    query: {};
-    mutation: {};
-    subscription: {};
+    query: object;
+    mutation: object;
+    subscription: object;
   }
 > extends PersistenceHelpers {
   query: GeneratedSchema['query'];