fix(packages/react): Stop auto refetch on render when maxRetries is…

… reached. (#1742)

.changeset/big-tigers-decide.md

@@ -0,0 +1,5 @@
+---
+'@gqty/react': patch
+---
+
+Stop auto refetch on render when `maxRetries` is reached.

.changeset/clever-plums-shout.md

@@ -2,4 +2,4 @@
 'gqty': minor
 ---
 
-feat: batching by microtask
+Batching by microtask

.changeset/curvy-dragons-smell.md

@@ -2,4 +2,4 @@
 '@gqty/cli': minor
 ---
 
-feat: Support "endpoint" in configuration
+Support "endpoint" in configuration

.changeset/fluffy-colts-confess.md

@@ -2,4 +2,4 @@
 '@gqty/cli': major
 ---
 
-feat(package/cli): upgrade @graphql-codegen/typescript to v4
+Upgrade @graphql-codegen/typescript to v4

.changeset/lemon-bags-behave.md

@@ -2,4 +2,4 @@
 '@gqty/cli': minor
 ---
 
-feat: interactive mode
+Interactive mode for generating queries and mutations

.changeset/polite-insects-protect.md

@@ -0,0 +1,5 @@
+---
+'gqty': minor
+---
+
+Added `batchWindow` option in `ClientOptions`

.changeset/real-camels-run.md

@@ -2,4 +2,4 @@
 '@gqty/react': minor
 ---
 
-feat: Added onComplete for useMutation
+Added `onComplete` in `useMutation`

.changeset/silly-foxes-hug.md

@@ -2,4 +2,4 @@
 'gqty': patch
 ---
 
-fix(packages/gqty): default return type for `resolve`
+Added default return type for `resolve`

.changeset/small-fishes-dress.md

@@ -2,4 +2,4 @@
 '@gqty/cli': major
 ---
 
-generated query fetcher now takes a single QueryPayload parameter
+Generated query fetcher now takes a single `QueryPayload` parameter

.changeset/weak-cougars-compare.md

@@ -3,4 +3,4 @@
 'gqty': minor
 ---
 
-feat: added extensions option
+Added `extensions` option for passing arbitraty data to the query fetcher.

examples/gnt/app/components/CscCharactersSearch.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import type { Variables } from 'gqty';
 import { useState, type FunctionComponent } from 'react';
 import Button from '~/components/tailwindui/Button';
-import type { Query } from '~/gqty';
+import type { Character, Characters, Maybe } from '~/gqty';
 import { useQuery } from '~/gqty/react';
 import Avatar from './Avatar';
 import Card from './Card';
@@ -15,10 +14,36 @@ export type Props = {};
 const Component: FunctionComponent<Props> = () => {
   const [searchValue, setSearchValue] = useState<string>();
 
+  const query = useQuery({
+    // cachePolicy: 'no-cache',
+  });
+
+  const error = query.$state.error;
+
   return (
     <>
-      <SearchBox onChange={setSearchValue} />
-      <Characters filter={{ name: searchValue }} />
+      <SearchBox
+        onChange={(v) => {
+          setSearchValue(v);
+          query.$refetch(false);
+        }}
+      />
+
+      {error && (
+        <Card>
+          {error.name ?? 'Error'}: {error.message}
+        </Card>
+      )}
+
+      {!error && (
+        <Characters
+          characters={
+            query.characters(
+              searchValue ? { filter: { name: searchValue } } : undefined
+            )?.results ?? undefined
+          }
+        />
+      )}
     </>
   );
 };
@@ -41,14 +66,12 @@ const SearchBox: FunctionComponent<{
   );
 };
 
-const Characters: FunctionComponent<Variables<Query['characters']>> = (
-  props
-) => {
-  const query = useQuery();
-
+const Characters: FunctionComponent<{ characters?: Maybe<Character>[] }> = ({
+  characters,
+}) => {
   return (
     <>
-      {query.characters(props)?.results?.map((character) => (
+      {characters?.map((character) => (
         <Card key={character?.id ?? '0'}>
           <Avatar character={character} />
 

examples/gnt/app/page.tsx

@@ -10,13 +10,11 @@ export default function Home() {
   return (
     <main className="p-5 min-h-screen">
       {/* CSR test */}
-
       <Suspense fallback={<div>Loading...</div>}>
         <CharactersSearch />
       </Suspense>
 
       {/* RSC test */}
-
       <Character id="1" />
       <Character id="2" />
       <Character id="3" />

internal/test-utils/test/_generated.ts

@@ -61,7 +61,7 @@ export interface SubscriptionSubscriberObject<
   TKey extends string,
   TParent,
   TContext,
-  TArgs
+  TArgs,
 > {
   subscribe: SubscriptionSubscribeFn<
     { [key in TKey]: TResult },
@@ -87,7 +87,7 @@ export type SubscriptionObject<
   TKey extends string,
   TParent,
   TContext,
-  TArgs
+  TArgs,
 > =
   | SubscriptionSubscriberObject<TResult, TKey, TParent, TContext, TArgs>
   | SubscriptionResolverObject<TResult, TParent, TContext, TArgs>;
@@ -97,7 +97,7 @@ export type SubscriptionResolver<
   TKey extends string,
   TParent = {},
   TContext = {},
-  TArgs = {}
+  TArgs = {},
 > =
   | ((
       ...args: any[]
@@ -122,7 +122,7 @@ export type DirectiveResolverFn<
   TResult = {},
   TParent = {},
   TContext = {},
-  TArgs = {}
+  TArgs = {},
 > = (
   next: NextResolverFn<TResult>,
   parent: TParent,
@@ -147,7 +147,8 @@ export type ResolversParentTypes = {
 
 export type QueryResolvers<
   ContextType = EZContext,
-  ParentType extends ResolversParentTypes['Query'] = ResolversParentTypes['Query']
+  ParentType extends
+    ResolversParentTypes['Query'] = ResolversParentTypes['Query'],
 > = {
   hello?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
 };

packages/cli/package.json

@@ -68,6 +68,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.7",
     "@types/node": "^20.12.8",
+    "@types/prettier": "^2.7.3",
     "bob-tsm": "^1.1.2",
     "esbuild": "^0.20.2",
     "open-cli": "^8.0.0",

packages/gqty/package.json

@@ -55,8 +55,7 @@
     "just-safe-set": "^4.2.1",
     "multidict": "^1.0.8",
     "object-hash": "^3.0.0",
-    "p-defer": "^3.0.0",
-    "p-lazy": "^3.1.0"
+    "p-defer": "^3.0.0"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^11.1.2",
@@ -74,6 +73,7 @@
     "jest": "^29.5.0",
     "just-memoize": "^2.2.0",
     "open-cli": "^8.0.0",
+    "p-lazy": "^3.0.0",
     "rimraf": "^5.0.5",
     "serve": "^14.2.3",
     "size-limit": "^11.1.2",

packages/gqty/src/Client/index.ts

@@ -111,13 +111,31 @@ export type ClientOptions = {
    */
   aliasLength?: number;
 
+  /**
+   * Milliseconds to wait before pending queries are batched up for fetching.
+   */
+  batchWindow?: number;
+
+  /**
+   * The cache to be used by the accessors and fetches.
+   */
   cache: Cache;
+
+  /**
+   * Options related to fetching.
+   */
   fetchOptions: FetchOptions;
+
   scalars: ScalarsEnumsHash;
+
+  /**
+   * The generated schema object.
+   */
   schema: Readonly<Schema>;
 
   /**
-   * Maximum accessor depth, prevents infinite recursions.
+   * Maximum accessor depth before an error is thrown, prevents infinite
+   * recursions.
    *
    * @default 15
    */
@@ -145,6 +163,7 @@ export const createClient = <
   _ObjectTypes extends SchemaObjects<TSchema> = never
 >({
   aliasLength = 6,
+  batchWindow,
   // This default cache on a required option is for legacy clients, which does
   // not provide a `cache` option.
   // TODO: compat: remove in v4
@@ -197,6 +216,7 @@ export const createClient = <
 
   const resolvers = createResolvers<TSchema>({
     aliasLength,
+    batchWindow,
     scalars,
     schema,
     cache,

packages/gqty/src/Client/resolvers.ts

@@ -17,6 +17,7 @@ import { updateCaches } from './updateCaches';
 
 export type CreateResolversOptions = {
   aliasLength?: number;
+  batchWindow?: number;
   cache: Cache;
   debugger?: Debugger;
   depthLimit: number;
@@ -99,7 +100,7 @@ export type SubscribeFn<TSchema extends BaseGeneratedSchema> = <
 
 export type DataFn<TSchema, TResult = unknown> = (schema: TSchema) => TResult;
 
-export type CreateResolverOptions = {
+export type ResolverOptions = {
   /**
    * Defines how a query should fetch from the cache and network.
    *
@@ -132,7 +133,7 @@ export type CreateResolverOptions = {
   operationName?: string;
 };
 
-export type ResolveOptions = CreateResolverOptions & {
+export type ResolveOptions = ResolverOptions & {
   /**
    * Awaits resolution it the query results in a fetch. Specify `false` to
    * immediately return the current cache, placeholder data will be returned on
@@ -145,7 +146,7 @@ export type ResolveOptions = CreateResolverOptions & {
   onFetch?: (fetchPromise: Promise<unknown>) => void;
 };
 
-export type SubscribeOptions = CreateResolverOptions & {
+export type SubscribeOptions = ResolverOptions & {
   /**
    * Intercept errors thrown from the underlying subscription client or query
    * fetcher.
@@ -171,6 +172,7 @@ const pendingQueries = new WeakMap<Set<Set<Selection>>, Promise<unknown>>();
 
 export const createResolvers = <TSchema extends BaseGeneratedSchema>({
   aliasLength,
+  batchWindow,
   cache: clientCache,
   debugger: debug,
   depthLimit,
@@ -235,7 +237,7 @@ export const createResolvers = <TSchema extends BaseGeneratedSchema>({
       }
 
       // Batch selections up at client level, fetch all of them "next tick".
-      const selectionsCacheKey = `${cachePolicy}/${operationName ?? ''}`;
+      const selectionsCacheKey = operationName ?? '';
 
       const pendingSelections = addSelections(
         clientCache,
@@ -248,6 +250,13 @@ export const createResolvers = <TSchema extends BaseGeneratedSchema>({
           pendingSelections,
           // Batching happens at the end of microtask queue
           Promise.resolve().then(async () => {
+            // Have to skip this because a 0 timeout still pushes it at least
+            // one more mictotask to the future. Also setTimeout() has no real
+            // time guarantee.
+            if (batchWindow) {
+              await new Promise((resolve) => setTimeout(resolve, batchWindow));
+            }
+
             const uniqueSelections = new Set<Selection>();
 
             getSelectionsSet(clientCache, selectionsCacheKey)?.forEach(

packages/gqty/src/Utils/deferred.ts

@@ -1,34 +1,4 @@
-export type DeferredState = 'pending' | 'resolved' | 'rejected';
-
-export type Deferred<T> = {
-  promise: Promise<T>;
-  resolve: (value: T) => void;
-  reject: (error: unknown) => void;
-  state: DeferredState;
-};
-
-export const createDeferred = <T>(): Deferred<T> => {
-  let resolve!: (value: T) => void;
-  let reject!: (error: unknown) => void;
-  let state: DeferredState = 'pending';
-  const promise = new Promise<T>((res, rej) => {
-    resolve = (value: T) => {
-      state = 'resolved';
-      res(value);
-    };
-    reject = (error: unknown) => {
-      state = 'rejected';
-      rej(error);
-    };
-  });
-
-  return {
-    promise,
-    resolve,
-    reject,
-    state,
-  };
-};
+import createDeferred, { type DeferredPromise } from 'p-defer';
 
 const asyncItDoneMessage = { done: true } as IteratorResult<never>;
 
@@ -38,7 +8,7 @@ export type DeferredIterator<T> = AsyncGenerator<T, void, unknown> & {
 };
 
 export const createDeferredIterator = <T>(): DeferredIterator<T> => {
-  let deferred: Deferred<void> | undefined = createDeferred<void>();
+  let deferred: DeferredPromise<void> | undefined = createDeferred<void>();
   const events: T[] = [];
 
   const next = async (): Promise<IteratorResult<T>> => {