fix(react): reduce over-fetching between renders #1594

examples/gnt/app/components/CscCharacterSearch.tsx

@@ -0,0 +1,68 @@
+'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 { useQuery } from '~/gqty/react';
+import Avatar from './Avatar';
+import Card from './Card';
+import SmallText from './SmallText';
+import Text from './Text';
+
+export type Props = {};
+
+const Component: FunctionComponent<Props> = () => {
+  const [searchValue, setSearchValue] = useState<string>();
+
+  return (
+    <>
+      <SelectBox onChange={setSearchValue} />
+      {searchValue && <Character id={searchValue} />}
+    </>
+  );
+};
+
+const SelectBox: FunctionComponent<{
+  onChange?: (value: string) => void;
+}> = ({ onChange }) => {
+  const [value, setValue] = useState<string>();
+
+  return (
+    <div className="flex gap-3">
+      <input
+        type="number"
+        defaultValue={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="border border-gray-300 rounded-md px-3 py-2 w-full text-black"
+      />
+      <Button
+        onClick={() => {
+          if (value) {
+            onChange?.(value);
+          }
+        }}
+      >
+        Search
+      </Button>
+    </div>
+  );
+};
+
+const Character: FunctionComponent<Variables<Query['character']>> = (props) => {
+  const character = useQuery().character(props);
+
+  return (
+    <Card>
+      <Avatar character={character} />
+
+      <div className="flex-1">
+        <Text>{character?.name}</Text>
+        <SmallText>{character?.species}</SmallText>
+        <SmallText>{character?.origin?.name}</SmallText>
+      </div>
+    </Card>
+  );
+};
+
+export default Component;

examples/gnt/app/components/CscCharactersSearch.tsx

@@ -0,0 +1,66 @@
+'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 { useQuery } from '~/gqty/react';
+import Avatar from './Avatar';
+import Card from './Card';
+import SmallText from './SmallText';
+import Text from './Text';
+
+export type Props = {};
+
+const Component: FunctionComponent<Props> = () => {
+  const [searchValue, setSearchValue] = useState<string>();
+
+  return (
+    <>
+      <SearchBox onChange={setSearchValue} />
+      <Characters filter={{ name: searchValue }} />
+    </>
+  );
+};
+
+const SearchBox: FunctionComponent<{
+  onChange?: (value: string) => void;
+}> = ({ onChange }) => {
+  const [inputName, setInputName] = useState('');
+
+  return (
+    <div className="flex gap-3">
+      <input
+        type="text"
+        defaultValue={inputName}
+        onChange={(e) => setInputName(e.target.value)}
+        className="border border-gray-300 rounded-md px-3 py-2 w-full text-black"
+      />
+      <Button onClick={() => onChange?.(inputName)}>Search</Button>
+    </div>
+  );
+};
+
+const Characters: FunctionComponent<Variables<Query['characters']>> = (
+  props
+) => {
+  const query = useQuery();
+
+  return (
+    <>
+      {query.characters(props)?.results?.map((character) => (
+        <Card key={character?.id ?? '0'}>
+          <Avatar character={character} />
+
+          <div className="flex-1">
+            <Text>{character?.name}</Text>
+            <SmallText>{character?.species}</SmallText>
+            <SmallText>{character?.origin?.name}</SmallText>
+          </div>
+        </Card>
+      ))}
+    </>
+  );
+};
+
+export default Component;

examples/gnt/app/Character.tsx → examples/gnt/app/components/RscCharacter.tsx

@@ -1,7 +1,7 @@
-import { resolve, type Query } from '../gqty';
+import { resolve, type Query } from '~/gqty';
 
 /** RSC */
-export default async function Character({
+export default async function RscCharacter({
   id,
 }: Parameters<Query['character']>[0]) {
   const data = await resolve(({ query }) => {

examples/gnt/app/page.tsx

@@ -1,14 +1,18 @@
 import { Suspense } from 'react';
-import Character from './Character';
-import MyComponent from './MyComponent';
+import CharacterSearch from './components/CscCharacterSearch';
+import CharactersSearch from './components/CscCharactersSearch';
+import Character from './components/RscCharacter';
+
+CharacterSearch;
+CharactersSearch;
 
 export default function Home() {
   return (
     <main className="p-5 min-h-screen">
       {/* CSR test */}
 
       <Suspense fallback={<div>Loading...</div>}>
-        <MyComponent />
+        <CharactersSearch />
       </Suspense>
 
       {/* RSC test */}

examples/gnt/gqty/index.ts

@@ -2,6 +2,7 @@
  * GQty: You can safely modify this file based on your needs.
  */
 
+import { createLogger } from '@gqty/logger';
 import { Cache, GQtyError, createClient, type QueryFetcher } from 'gqty';
 import {
   generatedSchema,
@@ -13,8 +14,6 @@ const queryFetcher: QueryFetcher = async function (
   { query, variables, operationName, extensions },
   fetchOptions
 ) {
-  console.debug({ query, variables, operationName, ...extensions });
-
   // Modify "https://rickandmortyapi.com/graphql" if needed
   const response = await fetch('https://rickandmortyapi.com/graphql', {
     method: 'POST',
@@ -32,7 +31,7 @@ const queryFetcher: QueryFetcher = async function (
 
   if (response.status >= 400) {
     throw new GQtyError(
-      `GraphQL endpoint responded with HTTP ${response.status}: ${response.statusText}.`
+      `GraphQL endpoint responded with HTTP status ${response.status}.`
     );
   }
 
@@ -71,6 +70,8 @@ export const client = createClient<GeneratedSchema>({
   },
 });
 
+createLogger(client).start();
+
 // Core functions
 export const { resolve, subscribe, schema } = client;
 

examples/gnt/package.json

@@ -27,6 +27,7 @@
     "eslint-config-next": "13.3.0",
     "postcss": "8.4.21",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "utf-8-validate": "^5.0.2"
   }
 }

internal/test-utils/package.json

@@ -28,7 +28,7 @@
     "build": "bob-ts -i src -f interop",
     "prepare": "pnpm build",
     "start": "nodemon --exec \"concurrently pnpm:build tsc\" -w src/index.ts",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --config local.jest.config.js"
+    "test": "jest --config local.jest.config.js"
   },
   "dependencies": {
     "@graphql-ez/fastify": "^0.12.0",

packages/cli/package.json

@@ -38,8 +38,8 @@
     "build": "bob-tsm build.ts",
     "prepare": "bob-tsm build.ts",
     "postpublish": "gh-release",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "test:watch-coverage": "rimraf coverage && mkdirp coverage/lcov-report && concurrently --raw \"jest --watchAll\" \"serve -l 8787 coverage/lcov-report\" \"wait-on tcp:8787 coverage/lcov-report/index.html && open-cli http://localhost:8787\""
   },
   "dependencies": {

packages/gqty/package.json

@@ -38,9 +38,9 @@
     "postpublish": "gh-release",
     "size": "size-limit",
     "start": "bob-esbuild watch",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:specific": "NODE_OPTIONS=--experimental-vm-modules jest test/interfaces-unions.test.ts --watch --no-coverage -u",
-    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
+    "test": "jest",
+    "test:specific": "jest test/interfaces-unions.test.ts --watch --no-coverage -u",
+    "test:watch": "jest --watch",
     "test:watch-coverage": "rimraf coverage && mkdirp coverage/lcov-report && concurrently --raw \"jest --watchAll\" \"serve -l 8787 coverage/lcov-report\" \"wait-on tcp:8787 coverage/lcov-report/index.html && open-cli http://localhost:8787\""
   },
   "dependencies": {

packages/gqty/src/Client/batching.ts

@@ -6,7 +6,7 @@ const pendingSelections = new Map<Cache, Map<string, Set<Set<Selection>>>>();
 export const addSelections = (
   cache: Cache,
   key: string,
-  value: Set<Selection>
+  selections: Set<Selection>
 ) => {
   if (!pendingSelections.has(cache)) {
     pendingSelections.set(cache, new Map());
@@ -18,19 +18,19 @@ export const addSelections = (
     selectionsByKey.set(key, new Set());
   }
 
-  return selectionsByKey.get(key)!.add(value);
+  return selectionsByKey.get(key)!.add(selections);
 };
 
 export const getSelectionsSet = (cache: Cache, key: string) =>
   pendingSelections.get(cache)?.get(key);
 
-export const delSelectionsSet = (cache: Cache, key: string) =>
+export const delSelectionSet = (cache: Cache, key: string) =>
   pendingSelections.get(cache)?.delete(key) ?? false;
 
 export const popSelectionsSet = (cache: Cache, key: string) => {
   const result = getSelectionsSet(cache, key);
 
-  delSelectionsSet(cache, key);
+  delSelectionSet(cache, key);
 
   return result;
 };

packages/gqty/src/Client/debugger.ts

@@ -14,19 +14,20 @@ export type DebugEvent = {
 export type DebugEventListener = (event: DebugEvent) => void;
 
 export type Debugger = {
-  dispatch: (event: DebugEvent) => void;
+  dispatch: (event: DebugEvent) => Promise<void>;
 
   /** Returns an unsubscribe function */
   subscribe: (listener: DebugEventListener) => () => void;
 };
 
-export const createDebugger = () => {
+export const createDebugger = (): Debugger => {
   const subs = new Set<DebugEventListener>();
 
   return {
-    dispatch: (event: DebugEvent) => {
-      subs.forEach((sub) => sub(event));
+    dispatch: async (event: DebugEvent) => {
+      await Promise.all([...subs].map((sub) => sub(event)));
     },
+
     subscribe: (listener: DebugEventListener) => {
       subs.add(listener);
       return () => subs.delete(listener);

packages/gqty/src/Client/resolveSelections.ts

@@ -80,7 +80,7 @@ export const fetchSelections = <
         }
 
         // TODO: Defer logging until after cache update
-        debug?.dispatch({
+        await debug?.dispatch({
           cache,
           request: queryPayload,
           result,

packages/gqty/src/Client/resolvers.ts

@@ -4,7 +4,7 @@ import { type Cache } from '../Cache';
 import { type GQtyError, type RetryOptions } from '../Error';
 import { type ScalarsEnumsHash, type Schema } from '../Schema';
 import { type Selection } from '../Selection';
-import { addSelections, delSelectionsSet, getSelectionsSet } from './batching';
+import { addSelections, delSelectionSet, getSelectionsSet } from './batching';
 import { createContext, type SchemaContext } from './context';
 import { type Debugger } from './debugger';
 import {
@@ -251,17 +251,13 @@ export const createResolvers = <TSchema extends BaseGeneratedSchema>({
 
             pendingQueries.delete(pendingSelections);
 
-            delSelectionsSet(clientCache, selectionsCacheKey);
+            delSelectionSet(clientCache, selectionsCacheKey);
 
             return fetchSelections(selections, {
               cache: context.cache,
               debugger: debug,
               extensions,
-              fetchOptions: {
-                ...fetchOptions,
-                cachePolicy,
-                retryPolicy,
-              },
+              fetchOptions: { ...fetchOptions, cachePolicy, retryPolicy },
               operationName,
             }).then((results) => {
               updateCaches(

packages/logger/package.json

@@ -37,8 +37,8 @@
     "postpublish": "gh-release",
     "size": "size-limit",
     "start": "bob-esbuild watch",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "prettier": "^3.0.1"