Move @graphiql/create-fetcher to @graphiql/toolkit

.changeset/good-experts-flash.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': patch
+---
+
+Move `@graphiql/create-fetcher` to `@graphiql/toolkit` because it doesn't need to be it's own package as @imolorhe pointed out

packages/codemirror-graphql/tsconfig.esm.json

@@ -22,19 +22,10 @@
   ],
   "references": [
     {
-      "path": "../graphiql-toolkit/tsconfig.esm.json"
+      "path": "../graphql-language-service-interface"
     },
     {
-      "path": "../graphql-language-service/tsconfig.esm.json"
-    },
-    {
-      "path": "../graphql-language-service-interface/tsconfig.esm.json"
-    },
-    {
-      "path": "../graphql-language-service-parser/tsconfig.esm.json"
-    },
-    {
-      "path": "../graphql-language-service-utils/tsconfig.esm.json"
+      "path": "../graphql-language-service-parser"
     }
   ]
 }

packages/codemirror-graphql/tsconfig.json

@@ -24,12 +24,6 @@
   ],
 
   "references": [
-    {
-      "path": "../graphql-language-service"
-    },
-    {
-      "path": "../graphql-language-service-utils"
-    },
     {
       "path": "../graphql-language-service-parser"
     },

packages/graphiql-2-rfc-context/tsconfig.esm.json

@@ -24,10 +24,10 @@
   ],
   "references": [
     {
-      "path": "../monaco-graphql/tsconfig.esm.json"
+      "path": "../monaco-graphql"
     },
     {
-      "path": "../graphql-language-service/tsconfig.esm.json"
+      "path": "../graphql-language-service"
     }
   ]
 }

packages/graphiql-create-fetcher/README.md → packages/graphiql-toolkit/docs/create-fetcher.md

@@ -1,4 +1,4 @@
-## `@graphiql/create-fetcher`
+## Create Fetcher
 
 a utility for generating a full-featured `fetcher` for GraphiQL including `@stream`, `@defer` `IncrementalDelivery`and `multipart`
 
@@ -8,18 +8,18 @@ under the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)
 
 [`graphiql`](https://npmjs.com/package/graphiql) and thus `react` and `react-dom` should already be installed.
 
-you'll need to install `@graphiql/create-fetcher`
+you'll need to install `@graphiql/toolkit`
 
 npm
 
 ```bash
-npm install --save @graphiql/create-fetcher
+npm install --save @graphiql/toolkit
 ```
 
 yarn
 
 ```bash
-yarn add @graphiql/create-fetcher
+yarn add @graphiql/toolkit
 ```
 
 ### Getting Started
@@ -34,7 +34,7 @@ Here's a simple example. In this case, a websocket client isn't even initialized
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { GraphiQL } from 'graphiql';
-import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const url = 'https://myschema.com/graphql';
 
@@ -53,7 +53,7 @@ Just by providing the `subscriptionUrl`, you can generate a `graphql-ws` client
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { GraphiQL } from 'graphiql';
-import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const url = 'https://myschema.com/graphql';
 
@@ -104,7 +104,7 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { GraphiQL } from 'graphiql';
 import { createClient } from 'graphql-ws';
-import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const url = 'https://myschema.com/graphql';
 
@@ -132,7 +132,7 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { GraphiQL } from 'graphiql';
 import { fetch } from 'isomorphic-fetch';
-import { createGraphiQLFetcher } from '@graphiql/create-fetcher';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const url = 'https://myschema.com/graphql';
 
@@ -145,3 +145,7 @@ export const App = () => <GraphiQL fetcher={fetcher} />;
 
 ReactDOM.render(document.getElementByID('graphiql'), <App />);
 ```
+
+## Credits
+
+This is inspired from `graphql-subscriptions-fetcher` and thanks to @Urigo

packages/graphiql-toolkit/package.json

@@ -19,6 +19,16 @@
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {},
+  "dependencies": {
+    "graphql-ws": "^4.1.0",
+    "subscriptions-transport-ws": "^0.9.18",
+    "meros": "^1.1.0-beta.2",
+    "@n1ru4l/push-pull-async-iterable-iterator": "^2.0.1"
+  },
+  "devDependencies": {
+    "isomorphic-fetch": "^3.0.0",
+    "graphql": "experimental-stream-defer"
+  },
   "keywords": [
     "graphql",
     "graphiql"

packages/graphiql-create-fetcher/src/createFetcher.ts → packages/graphiql-toolkit/src/createFetcher.ts

@@ -1,5 +1,4 @@
-import type { Fetcher } from '@graphiql/toolkit';
-import type { CreateFetcherOptions } from './types';
+import type { Fetcher, CreateFetcherOptions } from './types';
 
 import {
   createMultipartFetcher,

packages/graphiql-toolkit/src/index.ts

@@ -1,3 +1,4 @@
 export * from './types';
+export { createGraphiQLFetcher } from './createFetcher';
 
 // TODO: move the most useful utilities from graphiql to here

packages/graphiql-create-fetcher/src/lib.ts → packages/graphiql-toolkit/src/lib.ts

@@ -13,8 +13,8 @@ import type {
   FetcherParams,
   FetcherOpts,
   FetcherResultPayload,
-} from '@graphiql/toolkit';
-import type { CreateFetcherOptions } from './types';
+  CreateFetcherOptions,
+} from './types';
 
 /**
  * Returns true if the name matches a subscription in the AST

packages/graphiql-toolkit/src/types.ts

@@ -1,4 +1,6 @@
 import type { DocumentNode, IntrospectionQuery } from 'graphql';
+import type { Client, ClientOptions } from 'graphql-ws';
+import type { SubscriptionClient } from 'subscriptions-transport-ws';
 
 export type Observable<T> = {
   subscribe(opts: {
@@ -67,3 +69,51 @@ export type Fetcher = (
   graphQLParams: FetcherParams,
   opts?: FetcherOpts,
 ) => FetcherReturnType;
+
+export type WebsocketsClient = Client | SubscriptionClient;
+
+/**
+ * Options for creating a simple, spec-compliant GraphiQL fetcher
+ */
+export interface CreateFetcherOptions {
+  /**
+   * url for HTTP(S) requests. required!
+   */
+  url: string;
+  /**
+   * url for websocket subscription requests
+   */
+  subscriptionUrl?: string;
+  /**
+   * `wsClient` implementation that matches `ws-graphql` signature,
+   * whether via `createClient()` itself or another client.
+   */
+  wsClient?: Client;
+  /**
+   * Headers you can provide statically.
+   *
+   * If you enable the headers editor and the user provides
+   * A header you set statically here, it will be overriden by their value.
+   */
+  headers?: Record<string, string>;
+  /**
+   * Websockets connection params used when you provide subscriptionUrl. graphql-ws `ClientOptions.connectionParams`
+   */
+  wsConnectionParams?: ClientOptions['connectionParams'];
+  /**
+   * You can disable the usage of the `fetch-multipart-graphql` library
+   * entirely, defaulting to a simple fetch POST implementation.
+   */
+  enableIncrementalDelivery?: boolean;
+  /**
+   * The fetch implementation, in case the user needs to override this for SSR
+   * or other purposes. this does not override the `fetch-multipart-graphql`
+   * default fetch behavior yet.
+   */
+  fetch?: typeof fetch;
+  /**
+   * An optional custom fetcher specifically for your schema. For most cases
+   * the `url` and `headers` property should have you covered.
+   */
+  schemaFetcher?: Fetcher;
+}