fix(packages/react): infinite fetch via stale proxy #1588

bob-esbuild.config.ts

@@ -1,5 +1,5 @@
-import { sep } from 'path';
 import { readFileSync } from 'fs';
+import { sep } from 'path';
 
 const isCLIPackage = process.cwd().endsWith(sep + 'cli');
 

examples/gnt/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

examples/gnt/app/1588-infinite-fetch/gqty/index.ts

@@ -0,0 +1,109 @@
+/**
+ * GQty: You can safely modify this file based on your needs.
+ */
+
+import { createLogger } from '@gqty/logger';
+import { createReactClient } from '@gqty/react';
+import type { QueryFetcher } from 'gqty';
+import { Cache, GQtyError, createClient } from 'gqty';
+import type { GeneratedSchema } from './schema.generated';
+import { generatedSchema, scalarsEnumsHash } from './schema.generated';
+
+const queryFetcher: QueryFetcher = async function (
+  { query, variables, operationName },
+  fetchOptions
+) {
+  // Modify "https://rickandmortyapi.com/graphql" if needed
+  const response = await fetch('https://rickandmortyapi.com/graphql', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query,
+      variables,
+      operationName,
+    }),
+    mode: 'cors',
+    ...fetchOptions,
+  });
+
+  if (response.status >= 400) {
+    throw new GQtyError(
+      `GraphQL endpoint responded with HTTP ${response.status}: ${response.statusText}.`
+    );
+  }
+
+  const text = await response.text();
+
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new GQtyError(
+      `Malformed JSON response: ${
+        text.length > 50 ? text.slice(0, 50) + '...' : text
+      }`
+    );
+  }
+};
+
+const cache = new Cache(
+  undefined,
+  /**
+   * Default option is immediate cache expiry but keep it for 5 minutes,
+   * allowing soft refetches in background.
+   */
+  {
+    maxAge: 0,
+    staleWhileRevalidate: 5 * 60 * 1000,
+    normalization: true,
+  }
+);
+
+export const client = createClient<GeneratedSchema>({
+  schema: generatedSchema,
+  scalars: scalarsEnumsHash,
+  cache,
+  fetchOptions: {
+    fetcher: queryFetcher,
+  },
+});
+
+if (typeof window !== 'undefined') {
+  createLogger(client, {}).start();
+}
+
+// Core functions
+export const { resolve, subscribe, schema } = client;
+
+// Legacy functions
+export const {
+  query,
+  mutation,
+  mutate,
+  subscription,
+  resolved,
+  refetch,
+  track,
+} = client;
+
+export const {
+  graphql,
+  useQuery,
+  usePaginatedQuery,
+  useTransactionQuery,
+  useLazyQuery,
+  useRefetch,
+  useMutation,
+  useMetaState,
+  prepareReactRender,
+  useHydrateCache,
+  prepareQuery,
+} = createReactClient<GeneratedSchema>(client, {
+  defaults: {
+    // Enable Suspense, you can override this option at hooks.
+    suspense: false,
+  },
+});
+
+export * from './schema.generated';