{"_id":"@graphiql/create-fetcher","_rev":"194765","name":"@graphiql/create-fetcher","description":"A GraphiQL fetcher with `IncrementalDelivery` and `graphql-ws` support","dist-tags":{"latest":"0.1.0"},"maintainers":[{"name":"leebyron","email":"lee@leebyron.com"}],"time":{"modified":"2021-06-03T12:28:10.000Z","created":"2021-02-04T21:57:42.826Z","0.1.0":"2021-02-04T21:57:42.826Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/graphql/graphiql.git","directory":"packages/graphiql-create-fetcher"},"versions":{"0.1.0":{"name":"@graphiql/create-fetcher","version":"0.1.0","description":"A GraphiQL fetcher with `IncrementalDelivery` and `graphql-ws` support","contributors":[{"name":"Rikki Schulte","email":"rikki.schulte@gmail.com","url":"https://rikki.dev"}],"repository":{"type":"git","url":"git+https://github.com/graphql/graphiql.git","directory":"packages/graphiql-create-fetcher"},"homepage":"http://github.com/graphql/graphiql/tree/master/packages/graphiql-create-fetcher#readme","bugs":{"url":"https://github.com/graphql/graphiql/issues?q=issue+label:graphiql-create-fetcher"},"license":"MIT","main":"dist/index.js","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","@graphiql/toolkit":"^0.1.0"},"devDependencies":{"isomorphic-fetch":"^3.0.0","graphql":"experimental-stream-defer"},"_id":"@graphiql/create-fetcher@0.1.0","_nodeVersion":"12.20.1","_npmVersion":"6.14.10","dist":{"shasum":"44a9db5d8d06dfb5bfbe86f61ea4258da0cb56b1","size":53800,"noattachment":false,"key":"/@graphiql/create-fetcher/-/@graphiql/create-fetcher-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@graphiql/create-fetcher/download/@graphiql/create-fetcher-0.1.0.tgz"},"_npmUser":{"name":"acao","email":"rikki.schulte@gmail.com"},"directories":{},"maintainers":[{"name":"leebyron","email":"lee@leebyron.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-fetcher_0.1.0_1612475862700_0.3435470240307297"},"_hasShrinkwrap":false,"publish_time":1612475862826,"_cnpm_publish_time":1612475862826}},"readme":"## `@graphiql/create-fetcher`\n\na utility for generating a full-featured `fetcher` for GraphiQL including `@stream`, `@defer` `IncrementalDelivery`and `multipart`\n\nunder the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws) and [`meros`](https://www.npmjs.com/package/meros) which act as client reference implementations of the [GraphQL over HTTP Working Group Spec](https://github.com/graphql/graphql-over-http) specification, and the most popular transport spec proposals\n\n### Setup\n\n[`graphiql`](https://npmjs.com/package/graphiql) and thus `react` and `react-dom` should already be installed.\n\nyou'll need to install `@graphiql/create-fetcher`\n\nnpm\n\n```bash\nnpm install --save @graphiql/create-fetcher\n```\n\nyarn\n\n```bash\nyarn add @graphiql/create-fetcher\n```\n\n### Getting Started\n\nWe have a few flexible options to get you started with the client. It's meant to cover the majority of common use cases with a simple encapsulation.\n\n#### HTTP/Multipart Usage\n\nHere's a simple example. In this case, a websocket client isn't even initialized, only http (with multipart `@stream` and `@defer` support of course!).\n\n```ts\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/create-fetcher';\n\nconst url = 'https://myschema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({ url });\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nReactDOM.render(document.getElementByID('graphiql'), <App />);\n```\n\n#### HTTP/Multipart & Websockets\n\nJust by providing the `subscriptionUrl`, you can generate a `graphql-ws` client\n\n```ts\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { GraphiQL } from 'graphiql';\nimport { createGraphiQLFetcher } from '@graphiql/create-fetcher';\n\nconst url = 'https://myschema.com/graphql';\n\nconst subscriptionUrl = 'wss://myschema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  subscriptionUrl,\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nReactDOM.render(document.getElementByID('graphiql'), <App />);\n```\n\nYou can further customize the `wsClient` implementation below\n\n### Options\n\n#### `url` (_required_)\n\nThis is url used for all `HTTP` requests, and for schema introspection.\n\n#### `subscriptionUrl`\n\nThis generates a `graphql-ws` client.\n\n#### `wsClient`\n\nprovide your own subscriptions client. bypasses `subscriptionUrl`. In theory, this could be any client using any transport, as long as it matches `graphql-ws` `Client` signature.\n\n#### `headers`\n\nPass headers to any and all requests\n\n#### `fetch`\n\nPass a custom fetch implementation such as `isomorphic-feth`\n\n### Customization Examples\n\n#### Custom `wsClient` Example\n\nJust by providing the `subscriptionUrl`\n\n```ts\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { GraphiQL } from 'graphiql';\nimport { createClient } from 'graphql-ws';\nimport { createGraphiQLFetcher } from '@graphiql/create-fetcher';\n\nconst url = 'https://myschema.com/graphql';\n\nconst subscriptionUrl = 'wss://myschema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  wsClient: createClient({\n    url: subscriptionUrl,\n    keepAlive: 2000,\n  }),\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nReactDOM.render(document.getElementByID('graphiql'), <App />);\n```\n\n#### Custom `fetcher` Example\n\nFor SSR, we might want to use something like `isomorphic-fetch`\n\n```ts\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { GraphiQL } from 'graphiql';\nimport { fetch } from 'isomorphic-fetch';\nimport { createGraphiQLFetcher } from '@graphiql/create-fetcher';\n\nconst url = 'https://myschema.com/graphql';\n\nconst fetcher = createGraphiQLFetcher({\n  url,\n  fetch,\n});\n\nexport const App = () => <GraphiQL fetcher={fetcher} />;\n\nReactDOM.render(document.getElementByID('graphiql'), <App />);\n```\n","_attachments":{},"homepage":"http://github.com/graphql/graphiql/tree/master/packages/graphiql-create-fetcher#readme","bugs":{"url":"https://github.com/graphql/graphiql/issues?q=issue+label:graphiql-create-fetcher"},"license":"MIT"}