{"_id":"@graphiql/create-fetcher","_rev":"11-0800a71450d475e164908bbc40706730","name":"@graphiql/create-fetcher","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@graphiql/create-fetcher","version":"0.1.0","license":"MIT","_id":"@graphiql/create-fetcher@0.1.0","maintainers":[{"name":"acao","email":"rikki.schulte@gmail.com"},{"name":"leebyron","email":"lee@leebyron.com"}],"contributors":[{"url":"https://rikki.dev","name":"Rikki Schulte","email":"rikki.schulte@gmail.com"}],"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"},"dist":{"shasum":"44a9db5d8d06dfb5bfbe86f61ea4258da0cb56b1","tarball":"https://registry.npmjs.org/@graphiql/create-fetcher/-/create-fetcher-0.1.0.tgz","fileCount":46,"integrity":"sha512-qutJsyhvoCgRF82sBE6SlvWQBzSCyrO6qzCsYdLDzVR2J2L9JmuxqmkRp+V4Z5e/bDBNTOrpXe0FQ8gnylbhBg==","signatures":[{"sig":"MEUCIBQj5USRLLPlN6xsmsQTmXM1CYy8x7nk21TFpWiPloeFAiEArl/O7CfssR+oBhnKDcAktYcuNY45cUHoDQJZh142Z9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":381008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHG3XCRA9TVsSAnZWagAA5FsP/RMySyrnypoX4G2Vl7UX\nq2K3HMXy9qMa/3XEEHv5JiisVNF81myEjh2ctjwf99k+kSkKW7DpvKnbgExy\nqeIz5J0jmR9XyBy3hy7Arzj2Vh/cnXA4SvHwJAg/uFJBH3I1KPAvcAc0Lc+A\npubJzZrUQs3XvhxsSoEw/xclheE06tCY1KS+Bj0s1q/jmLlPKDfjI3by3jXk\nqSiiU+ENXqUZT8Y1L2EX0tcXH2L1WwjSHq9w95+erjpKnHNUwI17NsRNupdi\nojFUiLR5aNk3hAvKJP9wqhcm2PpYKIviHq3gHj2ciCcpcDQptBjAi9/shLsf\nmDczs+z1Ufrhl1GEAZiNBrs7d54rL24P0FKKwsqcRjlQrdYXNFFox+43TC5I\nincsYXM2sPwhzuavf7drAoirYwdoJ1LVTvSNCaJiZ39UYIjBcJO+THHc2YXD\nmqcGRXvEuj2NRw6lVi0XlKMZWrcfpe+pt48PJn0tJlGuYbb1ScoN4gPdkMLY\n2aiFxV9LVu63HtZKbNVwqo6uSdDzuoRbXXZRynAZOiDL24xpjpr7DEI72mbi\nZlyeoaUM3E+iXEISKveHfBwuMf2C9G/Fe8YR/1H39ScL2pyffOBWS4Opve1R\n2wUiHJ6xlAVmin7so74hc4l19v8YTZjLGusUtzZ3RZ0sinq3xykqicgws4f0\nYCEy\r\n=20WS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/index.d.ts","module":"esm/index.js","scripts":{},"_npmUser":{"name":"acao","email":"rikki.schulte@gmail.com"},"deprecated":"Please use the createFetcher helper from @graphiql/toolkit","repository":{"url":"git+https://github.com/graphql/graphiql.git","type":"git","directory":"packages/graphiql-create-fetcher"},"_npmVersion":"6.14.10","description":"A GraphiQL fetcher with `IncrementalDelivery` and `graphql-ws` support","directories":{},"_nodeVersion":"12.20.1","dependencies":{"meros":"^1.1.0-beta.2","graphql-ws":"^4.1.0","@graphiql/toolkit":"^0.1.0","subscriptions-transport-ws":"^0.9.18","@n1ru4l/push-pull-async-iterable-iterator":"^2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"graphql":"experimental-stream-defer","isomorphic-fetch":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/create-fetcher_0.1.0_1612475862700_0.3435470240307297","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-02-04T21:57:42.468Z","modified":"2026-08-23T15:36:26.486Z","0.1.0":"2021-02-04T21:57:42.826Z"},"bugs":{"url":"https://github.com/graphql/graphiql/issues?q=issue+label:graphiql-create-fetcher"},"license":"MIT","homepage":"http://github.com/graphql/graphiql/tree/master/packages/graphiql-create-fetcher#readme","repository":{"url":"git+https://github.com/graphql/graphiql.git","type":"git","directory":"packages/graphiql-create-fetcher"},"description":"A GraphiQL fetcher with `IncrementalDelivery` and `graphql-ws` support","contributors":[{"url":"https://rikki.dev","name":"Rikki Schulte","email":"rikki.schulte@gmail.com"}],"maintainers":[{"email":"npm@benjiegillam.com","name":"benjie"},{"email":"mahoney.mattj@gmail.com","name":"mjmahone"},{"email":"lee@leebyron.com","name":"leebyron"},{"email":"ivan.goncharov.ua@gmail.com","name":"i1g"}],"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","readmeFilename":"README.md"}