@nsxbet/react-relay-network-modern 1.0.0

package/LICENSE.md

@@ -0,0 +1,10 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present Pavel Chertorogov (original author)
+Copyright (c) 2026-present NSXBet (@nsxbet fork)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,324 @@
+# ReactRelayNetworkModern (for Relay Modern)
+
+[![npm](https://img.shields.io/npm/v/@nsxbet/react-relay-network-modern.svg)](https://www.npmjs.com/package/@nsxbet/react-relay-network-modern)
+[![CI](https://github.com/NSXBet/react-relay-network-modern/actions/workflows/ci.yml/badge.svg)](https://github.com/NSXBet/react-relay-network-modern/actions/workflows/ci.yml)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+![TypeScript](https://img.shields.io/badge/types-TypeScript-blue.svg)
+
+> `@nsxbet/react-relay-network-modern` is a fork of [`react-relay-network-modern`](https://github.com/relay-tools/react-relay-network-modern) by Pavel Chertorogov (@nodkz), modernized to TypeScript. We are not the owners of the original package.
+
+The `ReactRelayNetworkModern` is a [Network Layer for Relay Modern](https://relay.dev/docs/guides/network-layer/)
+with various middlewares which can manipulate requests/responses on the fly (change auth headers, request url or perform some fallback if request fails), batch several relay request by timeout into one http request, cache queries and server-side rendering.
+
+`ReactRelayNetworkModern` can be used in browser, react-native or node server for rendering. Under the hood this module uses global `fetch` method. So if your client is too old, please import explicitly proper polyfill to your code (eg. `whatwg-fetch`, `node-fetch` or `fetch-everywhere`).
+
+## Install
+
+```bash
+bun add @nsxbet/react-relay-network-modern
+# or
+npm install @nsxbet/react-relay-network-modern
+```
+
+### Builds
+
+This package ships ES modules and CommonJS builds with TypeScript declarations, resolved
+automatically through the package `exports` field. No `core-js`/`regenerator-runtime` polyfills
+are bundled — it targets modern runtimes and relies on the global `fetch`.
+
+```js
+import { RelayNetworkLayer } from '@nsxbet/react-relay-network-modern';
+```
+
+## Middlewares
+
+### Built-in middlewares
+
+- **your custom inline middleware** - [see example](https://github.com/NSXBet/react-relay-network-modern#example-of-injecting-networklayer-with-middlewares-on-the-client-side) below where added `credentials` and `headers` to the `fetch` method.
+  - `next => req => { /* your modification of 'req' object */ return next(req); }`
+- **urlMiddleware** - for manipulating fetch `url` on fly via thunk.
+  - `url` - string for single request. Can be Promise or function(req). (default: `/graphql`).
+  - `method` - string, for request method type (default: `POST`)
+  - headers - Object with headers for fetch. Can be Promise or function(req).
+  - credentials - string, setting for fetch method, eg. 'same-origin' (default: empty).
+  - also you may provide `mode`, `cache`, `redirect` options for fetch method, for details see [fetch spec](https://fetch.spec.whatwg.org/#requests).
+- **cacheMiddleware** - for caching same queries you may use this middleware. It will skip (do not cache) mutations and FormData requests.
+  - `size` - max number of request in cache, least-recently _updated_ entries purged first (default: `100`).
+  - `ttl` - number in milliseconds, how long records stay valid in cache (default: `900000`, 15 minutes).
+  - `onInit` - function(cache) which will be called once when cache is created. As first argument you receive `QueryResponseCache` instance from `relay-runtime`.
+  - `allowMutations` - allow to cache Mutation requests (default: `false`)
+  - `allowFormData` - allow to cache FormData requests (default: `false`)
+  - `clearOnMutation` - clear the cache on any Mutation (default: `false`)
+  - `cacheErrors` - cache responses with errors (default: `false`)
+  - `updateTTLOnGet` - refresh cache ttl on queries on successful cache get (default: `false`)
+- **authMiddleware** - for adding auth token, and refreshing it if gets 401 response from server.
+  - `token` - string which returns token. Can be function(req) or Promise. If function is provided, then it will be called for every request (so you may change tokens on fly).
+  - `tokenRefreshPromise`: - function(req, res) which must return promise or regular value with a new token. This function is called when server returns 401 status code. After receiving a new token, middleware re-run query to the server seamlessly for Relay.
+  - `allowEmptyToken` - allow made a request without Authorization header if token is empty (default: `false`).
+  - `prefix` - prefix before token (default: `'Bearer '`).
+  - `header` - name of the HTTP header to pass the token in (default: `'Authorization'`).
+  - If you use `auth` middleware with `retry`, `retry` must be used before `auth`. Eg. if token expired when retries apply, then `retry` can call `auth` middleware again.
+- **retryMiddleware** - for request retry if the initial request fails.
+  - `fetchTimeout` - number in milliseconds that defines in how much time will request timeout after it has been sent to the server again (default: `15000`). Or it may be a function `(attempt: number) => number` which returns a timeout in milliseconds (`attempt` starts from 0).
+  - `retryDelays` - array of millisecond that defines the values on which retries are based on (default: `[1000, 3000]`). Or it may be a function `(attempt: number) => number | false` which returns a timeout in milliseconds for retry or false for disabling retry (`attempt` starts from 0).
+  - `statusCodes` - array of response status codes which will fire up retryMiddleware. Or it may be a function `(statusCode: number, req, res) => boolean` which makes retry if returned true. (default: `status < 200 or status > 300`).
+  - `beforeRetry` - function(meta: { forceRetry: Function, abort: Function, delay: number, attempt: number, lastError: ?Error, req: RelayRequest }) called before every retry attempt. You get one argument with following properties:
+    - `forceRetry()` - for proceeding request immediately
+    - `abort(abortMsg: string)` - for aborting retry request. (Default abort message is: `"Aborted in beforeRetry() callback"`)
+    - `attempt` - number of the attemp (starts from 1)
+    - `delay` - number of milliseconds when next retry will be called
+    - `lastError` - will keep Error from previous request
+    - `req` - retriable Request object
+  - `allowMutations` - by default retries disabled for mutations, you may allow process retries for them passing `true`. (default: `false`)
+  - `allowFormData` - by default retries disabled for file Uploads, you may enable it passing `true` (default: `false`)
+  - `forceRetry` - deprecated, use `beforeRetry` instead (default: `false`).
+- **batchMiddleware** - gather some period of time relay-requests and sends it as one http-request. You server must support batch request and return results in the same order they were requested. [See how to setup your server.](https://github.com/NSXBet/react-relay-network-modern#example-how-to-enable-batching)
+  - `batchUrl` - string. Url of the server endpoint for batch request execution. Can be function(requestList) or Promise. (default: `/graphql/batch`)
+  - `batchTimeout` - integer in milliseconds, period of time for gathering multiple requests before sending them to the server. Will delay sending of the requests on specified in this option period of time, so be careful and keep this value small. (default: `0`)
+  - `maxBatchSize` - integer representing maximum size of request to be sent in a single batch. Once a request hits the provided size in length a new batch request is ran. Actual for hardcoded limit in 100kb per request in [express-graphql](https://github.com/graphql/express-graphql/blob/master/src/parseBody.js#L112) module. (default: `102400` characters, roughly 100kb for 1-byte characters or 200kb for 2-byte characters)
+  - `allowMutations` - by default batching disabled for mutations, you may enable it passing `true` (default: `false`)
+  - `method` - string, for request method type (default: `POST`)
+  - `headers` - Object with headers for fetch. Can be Promise or function(req).
+  - `credentials` - string, setting for fetch method, eg. 'same-origin' (default: empty).
+  - also you may provide `mode`, `cache`, `redirect` options for fetch method, for details see [fetch spec](https://fetch.spec.whatwg.org/#requests).
+- **loggerMiddleware** - for logging requests and responses.
+  - `logger` - log function (default: `console.log.bind(console, '[RELAY-NETWORK]')`)
+  - An example of req/res output in console: <img width="968" alt="screen shot 2017-11-19 at 23 05 19" src="https://user-images.githubusercontent.com/1946920/33159466-557517e0-d03d-11e7-9711-ebdfe6e789c8.png">
+- **perfMiddleware** - simple time measure for network request.
+  - `logger` - log function (default: `console.log.bind(console, '[RELAY-NETWORK]')`)
+- **errorMiddleware** - display `errors` data to console from graphql response. If you want see stackTrace for errors, you should provide `formatError` to `express-graphql` (see example below where `graphqlServer` accept `formatError` function).
+  - `logger` - log function (default: `console.error.bind(console)`)
+  - `prefix` - prefix message (default: `[RELAY-NETWORK] GRAPHQL SERVER ERROR:`)
+- **progressMiddleware** - enable onProgress callback for modern browsers with support for Stream API.
+  - `onProgress` - on progress callback function (`function(bytesCurrent: number, bytesTotal: number | null) => void`, total size will be null if size header is not set)
+  - `sizeHeader` - response header with total size of response (default: `Content-Length`, useful when `Transfer-Encoding: chunked` is set)
+- **uploadMiddleware** - extracts [`File`](https://developer.mozilla.org/docs/web/api/file), [`Blob`](https://developer.mozilla.org/docs/web/api/blob) and [`ReactNativeFile`](#class-reactnativefile) instances from query variables to be consumed with [graphql-upload](https://github.com/jaydenseric/graphql-upload)
+
+### Standalone package middlewares
+
+- [**react-relay-network-modern-ssr**](https://github.com/relay-tools/react-relay-network-modern-ssr) - client/server middleware for server-side rendering (SSR). On server side it makes requests directly via `graphql-js` and your `schema`, cache payloads and serialize them for putting to HTML. On client side it loads provided payloads and renders them in sync mode without visible flashes and loaders.
+
+### Example of injecting NetworkLayer with middlewares on the **client side**
+
+```js
+import { Environment, RecordSource, Store } from 'relay-runtime';
+import {
+  RelayNetworkLayer,
+  urlMiddleware,
+  batchMiddleware,
+  loggerMiddleware,
+  errorMiddleware,
+  perfMiddleware,
+  retryMiddleware,
+  authMiddleware,
+  cacheMiddleware,
+  progressMiddleware,
+  uploadMiddleware,
+} from 'react-relay-network-modern';
+
+const network = new RelayNetworkLayer(
+  [
+    cacheMiddleware({
+      size: 100, // max 100 requests
+      ttl: 900000, // 15 minutes
+    }),
+    urlMiddleware({
+      url: (req) => Promise.resolve('/graphql'),
+    }),
+    batchMiddleware({
+      batchUrl: (requestList) => Promise.resolve('/graphql/batch'),
+      batchTimeout: 10,
+    }),
+    __DEV__ ? loggerMiddleware() : null,
+    __DEV__ ? errorMiddleware() : null,
+    __DEV__ ? perfMiddleware() : null,
+    retryMiddleware({
+      fetchTimeout: 15000,
+      retryDelays: (attempt) => Math.pow(2, attempt + 4) * 100, // or simple array [3200, 6400, 12800, 25600, 51200, 102400, 204800, 409600],
+      beforeRetry: ({ forceRetry, abort, delay, attempt, lastError, req }) => {
+        if (attempt > 10) abort();
+        window.forceRelayRetry = forceRetry;
+        console.log('call `forceRelayRetry()` for immediately retry! Or wait ' + delay + ' ms.');
+      },
+      statusCodes: [500, 503, 504],
+    }),
+    authMiddleware({
+      token: () => store.get('jwt'),
+      tokenRefreshPromise: (req) => {
+        console.log('[client.js] resolve token refresh', req);
+        return fetch('/jwt/refresh')
+          .then((res) => res.json())
+          .then((json) => {
+            const token = json.token;
+            store.set('jwt', token);
+            return token;
+          })
+          .catch((err) => console.log('[client.js] ERROR can not refresh token', err));
+      },
+    }),
+    progressMiddleware({
+      onProgress: (current, total) => {
+        console.log('Downloaded: ' + current + ' B, total: ' + total + ' B');
+      },
+    }),
+    uploadMiddleware(),
+
+    // example of the custom inline middleware
+    (next) => async (req) => {
+      req.fetchOpts.method = 'GET'; // change default POST request method to GET
+      req.fetchOpts.headers['X-Request-ID'] = uuid.v4(); // add `X-Request-ID` to request headers
+      req.fetchOpts.credentials = 'same-origin'; // allow to send cookies (sending credentials to same domains)
+      // req.fetchOpts.credentials = 'include'; // allow to send cookies for CORS (sending credentials to other domains)
+
+      console.log('RelayRequest', req);
+
+      const res = await next(req);
+      console.log('RelayResponse', res);
+
+      return res;
+    },
+  ],
+  opts
+); // as second arg you may pass advanced options for RRNL
+
+const source = new RecordSource();
+const store = new Store(source);
+const environment = new Environment({ network, store });
+```
+
+## Advanced options (2nd argument after middlewares)
+
+RelayNetworkLayer may accept additional options:
+
+```js
+const middlewares = []; // array of middlewares
+const options = {}; // optional advanced options
+const network = new RelayNetworkLayer(middlewares, options);
+```
+
+Available options:
+
+- **subscribeFn** - if you use subscriptions in your app, you may provide this function which will be passed to [RelayNetwork](https://github.com/facebook/relay/blob/master/packages/relay-runtime/network/RelayNetwork.js).
+- **noThrow** - **EXPERIMENTAL (May be deprecated in the future)** set true to not throw when an error response is given by the server, and to instead handle errors in your app code.
+
+## Server-side rendering (SSR)
+
+See [react-relay-network-modern-ssr](https://github.com/relay-tools/react-relay-network-modern-ssr) for SSR middleware.
+
+## How middlewares work internally
+
+Middlewares on bottom layer use [fetch](https://github.com/github/fetch) method. So `req` is compliant with a `fetch()` options. And `res` can be obtained via `resPromise.then(res => ...)`, which returned by `fetch()`.
+
+Middleware that needs access to the raw response body from fetch (before it has been consumed) can set `isRawMiddleware = true`, see `progressMiddleware` for example. It is important to note that `response.body` can only be consumed once, so make sure to `clone()` the response first.
+
+Middlewares have 3 phases:
+
+- `setup phase`, which runs only once, when middleware added to the NetworkLayer
+- `capturing phase`, when you may change request object, and pass it down via `next(req)`
+- `bubbling phase`, when you may change response promise, made re-request or pass it up unchanged
+
+Basic skeleton of middleware:
+
+```js
+export default function skeletonMiddleware(opts = {}) {
+  // [SETUP PHASE]: here you can process `opts`, when you create Middleware
+
+  return (next) => async (req) => {
+    // [CAPTURING PHASE]: here you can change `req` object, before it will pass to following middlewares.
+    // ...some code which modify `req`
+
+    const res = await next(req); // pass request to following middleware and get response promise from it
+
+    // [BUBBLING PHASE]: here you may change response of underlying middlewares, via promise syntax
+    // ...some code, which process `req`
+
+    return res; // return response to upper middleware
+  };
+}
+```
+
+Middlewares use LIFO (last in, first out) stack. Or simply put - use `compose` function. So if you pass such middlewares [M1(opts), M2(opts)] to NetworkLayer it will be work such way:
+
+- call setup phase of `M1` with its opts
+- call setup phase of `M2` with its opts
+- for each request
+- call capture phase of `M1`
+- call capture phase of `M2`
+- call `fetch` method
+- call bubbling phase of `M2`
+- call bubbling phase of `M1`
+- chain to `resPromise.then(res => res.json())` and pass this promise for resolving/rejecting Relay requests.
+
+## Batching several requests into one
+
+Joseph Savona [wrote](https://github.com/facebook/relay/issues/1058#issuecomment-213592051): For legacy reasons, Relay splits "plural" root queries into individual queries. In general we want to diff each root value separately, since different fields may be missing for different root values.
+
+Also if you use [react-relay-router](https://github.com/relay-tools/react-router-relay) and have multiple root queries in one route pass, you may notice that default network layer will produce several http requests.
+
+So for avoiding multiple http-requests, the `ReactRelayNetworkModern` is the right way to combine it in single http-request.
+
+### Example how to enable batching
+
+#### ...on server
+
+Firstly, you should prepare **server** to process the batch request:
+
+```js
+import express from 'express';
+import graphqlHTTP from 'express-graphql';
+import { graphqlBatchHTTPWrapper } from 'react-relay-network-modern';
+import bodyParser from 'body-parser';
+import myGraphqlSchema from './graphqlSchema';
+
+const port = 3000;
+const server = express();
+
+// setup standart `graphqlHTTP` express-middleware
+const graphqlServer = graphqlHTTP({
+  schema: myGraphqlSchema,
+  formatError: (error) => ({
+    // better errors for development. `stack` used in `gqErrors` middleware
+    message: error.message,
+    stack: process.env.NODE_ENV === 'development' ? error.stack.split('\n') : null,
+  }),
+});
+
+// declare route for batch query
+server.use('/graphql/batch', bodyParser.json(), graphqlBatchHTTPWrapper(graphqlServer));
+
+// declare standard graphql route
+server.use('/graphql', graphqlServer);
+
+server.listen(port, () => {
+  console.log(`The server is running at http://localhost:${port}/`);
+});
+```
+
+[More complex example](https://github.com/NSXBet/react-relay-network-modern/blob/main/examples/dataLoaderPerBatchRequest.js) of how you can use a single [DataLoader](https://github.com/facebook/dataloader) for all (batched) queries within a one HTTP-request.
+
+If you are on Koa@2, [koa-graphql-batch](https://github.com/mattecapu/koa-graphql-batch) provides the same functionality as `graphqlBatchHTTPWrapper` (see its docs for usage example).
+
+#### ...on client
+
+And right after server side ready to accept batch queries, you may enable batching on the **client**:
+
+```js
+const network = new RelayNetworkLayer([
+  batchMiddleware({
+    batchUrl: '/graphql/batch', // <--- route for batch queries
+  }),
+]);
+```
+
+### How batching works internally
+
+Internally batching in `NetworkLayer` prepare list of queries `[ {query, variables}, ...]` sends it to server. And server returns list of results `[ {data}, ...]`. The server is expected to return the results in the same order as the requests.
+
+## Contribute
+
+I actively welcome pull requests with code and doc fixes.
+Also if you made great middleware and want share it within this module, please feel free to open PR.
+
+## License
+
+[MIT](https://github.com/NSXBet/react-relay-network-modern/blob/main/LICENSE.md)

package/dist/RRNLError.cjs

@@ -0,0 +1,9 @@
+//#region src/RRNLError.ts
+var RRNLError = class extends Error {
+	constructor(msg) {
+		super(msg);
+		this.name = "RRNLError";
+	}
+};
+//#endregion
+exports.default = RRNLError;

package/dist/RRNLError.d.cts

@@ -0,0 +1,6 @@
+//#region src/RRNLError.d.ts
+declare class RRNLError extends Error {
+  constructor(msg: string);
+}
+//#endregion
+export { RRNLError };

package/dist/RRNLError.d.ts

@@ -0,0 +1,6 @@
+//#region src/RRNLError.d.ts
+declare class RRNLError extends Error {
+  constructor(msg: string);
+}
+//#endregion
+export { RRNLError };

package/dist/RRNLError.js

@@ -0,0 +1,9 @@
+//#region src/RRNLError.ts
+var RRNLError = class extends Error {
+	constructor(msg) {
+		super(msg);
+		this.name = "RRNLError";
+	}
+};
+//#endregion
+export { RRNLError as default };

package/dist/RelayNetworkLayer.cjs

@@ -0,0 +1,54 @@
+const require_RelayRequest = require("./RelayRequest.cjs");
+const require_fetchWithMiddleware = require("./fetchWithMiddleware.cjs");
+let relay_runtime = require("relay-runtime");
+//#region src/RelayNetworkLayer.ts
+var RelayNetworkLayer = class {
+	_middlewares;
+	_rawMiddlewares;
+	_middlewaresSync;
+	execute;
+	executeWithEvents;
+	fetchFn;
+	subscribeFn;
+	noThrow;
+	constructor(middlewares, opts) {
+		this._middlewares = [];
+		this._rawMiddlewares = [];
+		this._middlewaresSync = [];
+		this.noThrow = false;
+		(Array.isArray(middlewares) ? middlewares : [middlewares]).forEach((mw) => {
+			if (mw) if (mw.execute) this._middlewaresSync.push(mw.execute);
+			else if (mw.isRawMiddleware) this._rawMiddlewares.push(mw);
+			else this._middlewares.push(mw);
+		});
+		if (opts) {
+			this.subscribeFn = opts.subscribeFn;
+			this.noThrow = opts.noThrow === true;
+			if (opts.beforeFetch) this._middlewaresSync.push(opts.beforeFetch);
+		}
+		this.fetchFn = (operation, variables, cacheConfig, uploadables) => {
+			for (let i = 0; i < this._middlewaresSync.length; i++) {
+				const res = this._middlewaresSync[i](operation, variables, cacheConfig, uploadables);
+				if (res) return res;
+			}
+			return { subscribe: (sink) => {
+				const req = new require_RelayRequest.default(operation, variables, cacheConfig, uploadables);
+				require_fetchWithMiddleware.default(req, this._middlewares, this._rawMiddlewares, this.noThrow).then((value) => {
+					sink.next(value);
+					sink.complete();
+				}, (error) => {
+					if (error && error.name && error.name === "AbortError") sink.complete();
+					else sink.error(error);
+				}).catch(() => {});
+				return () => {
+					req.cancel();
+				};
+			} };
+		};
+		const network = relay_runtime.Network.create(this.fetchFn, this.subscribeFn);
+		this.execute = network.execute;
+		this.executeWithEvents = network.executeWithEvents;
+	}
+};
+//#endregion
+exports.default = RelayNetworkLayer;

package/dist/RelayNetworkLayer.d.cts

@@ -0,0 +1,21 @@
+import { FetchFunction, FetchHookFunction, Middleware, MiddlewareRaw, MiddlewareSync, RNLExecuteFunction, SubscribeFunction } from "./definition.cjs";
+
+//#region src/RelayNetworkLayer.d.ts
+interface RelayNetworkLayerOpts {
+  subscribeFn?: SubscribeFunction;
+  beforeFetch?: FetchHookFunction;
+  noThrow?: boolean;
+}
+declare class RelayNetworkLayer {
+  _middlewares: Middleware[];
+  _rawMiddlewares: MiddlewareRaw[];
+  _middlewaresSync: RNLExecuteFunction[];
+  execute: RNLExecuteFunction;
+  executeWithEvents: any;
+  readonly fetchFn: FetchFunction;
+  readonly subscribeFn?: SubscribeFunction;
+  readonly noThrow: boolean;
+  constructor(middlewares: Array<Middleware | MiddlewareSync | MiddlewareRaw | null>, opts?: RelayNetworkLayerOpts);
+}
+//#endregion
+export { RelayNetworkLayer, RelayNetworkLayerOpts };

package/dist/RelayNetworkLayer.d.ts

@@ -0,0 +1,21 @@
+import { FetchFunction, FetchHookFunction, Middleware, MiddlewareRaw, MiddlewareSync, RNLExecuteFunction, SubscribeFunction } from "./definition.js";
+
+//#region src/RelayNetworkLayer.d.ts
+interface RelayNetworkLayerOpts {
+  subscribeFn?: SubscribeFunction;
+  beforeFetch?: FetchHookFunction;
+  noThrow?: boolean;
+}
+declare class RelayNetworkLayer {
+  _middlewares: Middleware[];
+  _rawMiddlewares: MiddlewareRaw[];
+  _middlewaresSync: RNLExecuteFunction[];
+  execute: RNLExecuteFunction;
+  executeWithEvents: any;
+  readonly fetchFn: FetchFunction;
+  readonly subscribeFn?: SubscribeFunction;
+  readonly noThrow: boolean;
+  constructor(middlewares: Array<Middleware | MiddlewareSync | MiddlewareRaw | null>, opts?: RelayNetworkLayerOpts);
+}
+//#endregion
+export { RelayNetworkLayer, RelayNetworkLayerOpts };

package/dist/RelayNetworkLayer.js

@@ -0,0 +1,54 @@
+import RelayRequest from "./RelayRequest.js";
+import fetchWithMiddleware from "./fetchWithMiddleware.js";
+import { Network } from "relay-runtime";
+//#region src/RelayNetworkLayer.ts
+var RelayNetworkLayer = class {
+	_middlewares;
+	_rawMiddlewares;
+	_middlewaresSync;
+	execute;
+	executeWithEvents;
+	fetchFn;
+	subscribeFn;
+	noThrow;
+	constructor(middlewares, opts) {
+		this._middlewares = [];
+		this._rawMiddlewares = [];
+		this._middlewaresSync = [];
+		this.noThrow = false;
+		(Array.isArray(middlewares) ? middlewares : [middlewares]).forEach((mw) => {
+			if (mw) if (mw.execute) this._middlewaresSync.push(mw.execute);
+			else if (mw.isRawMiddleware) this._rawMiddlewares.push(mw);
+			else this._middlewares.push(mw);
+		});
+		if (opts) {
+			this.subscribeFn = opts.subscribeFn;
+			this.noThrow = opts.noThrow === true;
+			if (opts.beforeFetch) this._middlewaresSync.push(opts.beforeFetch);
+		}
+		this.fetchFn = (operation, variables, cacheConfig, uploadables) => {
+			for (let i = 0; i < this._middlewaresSync.length; i++) {
+				const res = this._middlewaresSync[i](operation, variables, cacheConfig, uploadables);
+				if (res) return res;
+			}
+			return { subscribe: (sink) => {
+				const req = new RelayRequest(operation, variables, cacheConfig, uploadables);
+				fetchWithMiddleware(req, this._middlewares, this._rawMiddlewares, this.noThrow).then((value) => {
+					sink.next(value);
+					sink.complete();
+				}, (error) => {
+					if (error && error.name && error.name === "AbortError") sink.complete();
+					else sink.error(error);
+				}).catch(() => {});
+				return () => {
+					req.cancel();
+				};
+			} };
+		};
+		const network = Network.create(this.fetchFn, this.subscribeFn);
+		this.execute = network.execute;
+		this.executeWithEvents = network.executeWithEvents;
+	}
+};
+//#endregion
+export { RelayNetworkLayer as default };

package/dist/RelayRequest.cjs

@@ -0,0 +1,90 @@
+const require_RRNLError = require("./RRNLError.cjs");
+//#region src/RelayRequest.ts
+function getFormDataInterface() {
+	return typeof window !== "undefined" && window.FormData || global && global.FormData;
+}
+var RelayRequest = class {
+	static lastGenId;
+	id;
+	fetchOpts;
+	operation;
+	variables;
+	cacheConfig;
+	uploadables;
+	controller;
+	constructor(operation, variables, cacheConfig, uploadables) {
+		this.operation = operation;
+		this.variables = variables;
+		this.cacheConfig = cacheConfig;
+		this.uploadables = uploadables;
+		this.id = this.operation.id || this.operation.name || this._generateID();
+		const fetchOpts = {
+			method: "POST",
+			headers: {},
+			body: this.prepareBody()
+		};
+		this.controller = typeof window !== "undefined" && window.AbortController ? new window.AbortController() : null;
+		if (this.controller) fetchOpts.signal = this.controller.signal;
+		this.fetchOpts = fetchOpts;
+	}
+	getBody() {
+		return this.fetchOpts.body;
+	}
+	prepareBody() {
+		const { uploadables } = this;
+		if (uploadables) {
+			const _FormData_ = getFormDataInterface();
+			if (!_FormData_) throw new require_RRNLError.default("Uploading files without `FormData` interface does not supported.");
+			const formData = new _FormData_();
+			formData.append("id", this.getID());
+			formData.append("query", this.getQueryString());
+			formData.append("variables", JSON.stringify(this.getVariables()));
+			Object.keys(uploadables).forEach((key) => {
+				if (Object.prototype.hasOwnProperty.call(uploadables, key)) formData.append(key, uploadables[key]);
+			});
+			return formData;
+		}
+		return JSON.stringify({
+			id: this.getID(),
+			query: this.getQueryString(),
+			variables: this.getVariables()
+		});
+	}
+	getID() {
+		return this.id;
+	}
+	_generateID() {
+		const ctor = this.constructor;
+		if (!ctor.lastGenId) ctor.lastGenId = 0;
+		ctor.lastGenId += 1;
+		return ctor.lastGenId.toString();
+	}
+	getQueryString() {
+		return this.operation.text || "";
+	}
+	getVariables() {
+		return this.variables;
+	}
+	isMutation() {
+		return this.operation.operationKind === "mutation";
+	}
+	isFormData() {
+		const _FormData_ = getFormDataInterface();
+		return !!_FormData_ && this.fetchOpts.body instanceof _FormData_;
+	}
+	cancel() {
+		if (this.controller) {
+			this.controller.abort();
+			return true;
+		}
+		return false;
+	}
+	clone() {
+		const newRequest = Object.assign(Object.create(Object.getPrototypeOf(this)), this);
+		newRequest.fetchOpts = { ...this.fetchOpts };
+		newRequest.fetchOpts.headers = { ...this.fetchOpts.headers };
+		return newRequest;
+	}
+};
+//#endregion
+exports.default = RelayRequest;

package/dist/RelayRequest.d.cts

@@ -0,0 +1,26 @@
+import { CacheConfig, ConcreteBatch, FetchOpts, UploadableMap, Variables } from "./definition.cjs";
+
+//#region src/RelayRequest.d.ts
+declare class RelayRequest {
+  static lastGenId: number;
+  id: string;
+  fetchOpts: FetchOpts;
+  operation: ConcreteBatch;
+  variables: Variables;
+  cacheConfig: CacheConfig;
+  uploadables?: UploadableMap | null;
+  controller: AbortController | null;
+  constructor(operation: ConcreteBatch, variables: Variables, cacheConfig: CacheConfig, uploadables?: UploadableMap | null);
+  getBody(): string | FormData;
+  prepareBody(): string | FormData;
+  getID(): string;
+  _generateID(): string;
+  getQueryString(): string;
+  getVariables(): Variables;
+  isMutation(): boolean;
+  isFormData(): boolean;
+  cancel(): boolean;
+  clone(): RelayRequest;
+}
+//#endregion
+export { RelayRequest };

package/dist/RelayRequest.d.ts

@@ -0,0 +1,26 @@
+import { CacheConfig, ConcreteBatch, FetchOpts, UploadableMap, Variables } from "./definition.js";
+
+//#region src/RelayRequest.d.ts
+declare class RelayRequest {
+  static lastGenId: number;
+  id: string;
+  fetchOpts: FetchOpts;
+  operation: ConcreteBatch;
+  variables: Variables;
+  cacheConfig: CacheConfig;
+  uploadables?: UploadableMap | null;
+  controller: AbortController | null;
+  constructor(operation: ConcreteBatch, variables: Variables, cacheConfig: CacheConfig, uploadables?: UploadableMap | null);
+  getBody(): string | FormData;
+  prepareBody(): string | FormData;
+  getID(): string;
+  _generateID(): string;
+  getQueryString(): string;
+  getVariables(): Variables;
+  isMutation(): boolean;
+  isFormData(): boolean;
+  cancel(): boolean;
+  clone(): RelayRequest;
+}
+//#endregion
+export { RelayRequest };