{"bugs":{"url":"https://github.com/graphcool/graphql-playground/issues"},"dist":{"shasum":"e681871ac99bfcfc517b502894d785e7795848c7","tarball":"https://registry.npmjs.org/graphql-playground-react/-/graphql-playground-react-1.7.22-test.tgz","fileCount":550,"integrity":"sha512-d59i3XnrEv9XvM8PoTZo1vdd+HTyomrqmO6CWxpw6psVZQad2l/zHOl0JfBFOngb9zDlimzJe9038I3kw5xdIw==","signatures":[{"sig":"MEQCIGqeA25tBtyFtWhFB+XlAhNewUxQbIvPJ8skt/deKuu5AiBGjityBIGsqWTIN1xYxqRZX7Qf7dioqm6HcK7jKKj0og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33227343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAhkSCRA9TVsSAnZWagAAuSYP/i8OaDDQ1yzI0vIH7jNc\nfl9NIbONYYZBpsX+jiM1ekHaCWJfklpaQbAZx+sJoQZjzhkYudnYDs63h9oc\nVkUJxJzGbCjzziS3ksJIiq5jdeZbhoKWaW56v0dvaYOxgZj0qCaLLAa4t8R3\n4POcGXL0dMP+u2X1SYdgU90Q5m506TjNjO1/O9X5nOUMUIby5UThK/eWJf24\nJW2ug3iTqwFJPGODxHZTi++ISc3MhYNP4XJKXxzuoQzS1X24p5JVABtTihEG\nUEzZlem+q7mdhCWNyikW6I7WCnTAmHAtreS5Y9U9Wb08J2qO5+8tEcntB4w+\nUr+aF1r8MKyDYkoqzTN68Sv93aXUIvv18VpBuNQ8g4o8OsuwbO96j14EmqXb\nrN0ytt2C56M8jEmySXqKWvCqOfhZaMUXxA1nwmR1ndvysxaF3/aqTk464UGG\nHr7l6ZQDOFCFHiiVP2DolrzeB8rLgtt9YRriVyQnbKPfUaBsy+gOe+RR6t0Q\nTlnYtL9eUG9U9iOds3oGa4jiF5/ub0Z2aj6gXeK6UybIwOwuz2ufCnwMkvzF\nW1tW+RpCptG4wtKdNyZvHKxUrn76G1Na1Fgi++12y0t5blmHe/0uCTRW9rEN\nqM99hQEIhhmaCDlyrQyuI3nX3fdG7zOcaAIvdS6nNun2HcemVsOvacb3PIYN\nDoRl\r\n=yDiW\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$","transform":{"^.+\\.css$":"<rootDir>/config/jest/cssTransform.js","^.+\\.tsx?$":"<rootDir>/config/jest/typescriptTransform.js","^(?!.*\\.(css|json)$)":"<rootDir>/config/jest/fileTransform.js"},"setupFiles":["<rootDir>/config/polyfills.js"],"testEnvironment":"node","moduleNameMapper":{"^react-native$":"react-native-web"},"collectCoverageFrom":["src/**/*.{ts,tsx}"],"moduleFileExtensions":["ts","tsx","js"],"testPathIgnorePatterns":["<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"],"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"]},"main":"./lib/lib.js","name":"graphql-playground-react","readme":"<p align=\"center\"><img src=\"https://imgur.com/5fzMbyV.png\" width=\"269\"></p>\n\nGraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration). <br />\n**You can download the [desktop app](https://github.com/graphcool/graphql-playground/releases) or use the web version at graphqlbin.com: [Demo](https://www.graphqlbin.com/RVIn)**\n\n[![](https://imgur.com/6IC6Huj.png)](https://www.graphqlbin.com/RVIn)\n\n## Features\n\n- ✨ Context-aware autocompletion & error highlighting\n- 📚 Interactive, multi-column docs (keyboard support)\n- ⚡️ Supports real-time GraphQL Subscriptions\n\n## FAQ\n\n### How is this different from [GraphiQL](https://github.com/graphql/graphiql)?\n\nGraphQL Playground uses components of GraphiQL under the hood but is meant as a more powerful GraphQL IDE enabling better (local) development workflows. Compared to GraphiQL, the GraphQL Playground ships with the following additional features:\n\n- Interactive, multi-column schema documentation\n- Automatic schema reloading\n- Support for GraphQL Subscriptions\n- Query history\n- Configuration of HTTP headers\n- Tabs\n\nSee the following question for more additonal features.\n\n### What's the difference between the desktop app and the web version?\n\nThe desktop app is the same as the web version but includes these additional features:\n\n- Support for [graphql-config](https://github.com/prisma/graphql-config) enabling features like multi-environment setups.\n- Double click on `*.graphql` files.\n\n### How does GraphQL Bin work?\n\nYou can easily share your Playgrounds with others by clicking on the \"Share\" button and sharing the generated link. You can think about GraphQL Bin like Pastebin for your GraphQL queries including the context (endpoint, HTTP headers, open tabs etc).\n\n![](https://imgur.com/H1n64lL.png)\n\n> You can also find the announcement blog post [here](https://www.prisma.io/blog/introducing-graphql-playground-f1e0a018f05d).\n\n## Usage\n\n### Properties\n\nAll interfaces, the React component `<Playground />` and all middlewares expose the same set of options:\n\n- `properties`\n  - `endpoint` [`string`] - the GraphQL endpoint url.\n  - `subscriptionEndpoint` [`string`] - the GraphQL subscriptions endpoint url.\n  - `setTitle` [`boolean`] - reflect the current endpoint in the page title\n\n### As React Component\n\n#### Install\n\n```sh\nyarn add graphql-playground\n```\n\n#### Use\n\nGraphQL Playground provides a React component responsible for rendering the UI and Session management.\nThere are **3 dependencies** needed in order to run the `graphql-playground` React component.\n\n1.  _Open Sans_ and _Source Code Pro_ fonts\n2.  Rendering the `<Playground />` component\n\nThe GraphQL Playground requires **React 16**.\n\nIncluding Fonts (`1.`)\n\n```html\n<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700\" rel=\"stylesheet\">\n```\n\nIncluding stylesheet and the component (`2., 3.`)\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Playground from 'graphql-playground'\n\nReactDOM.render(\n  <Playground endpoint=\"https://api.graph.cool/simple/v1/swapi\" />,\n  document.body,\n)\n```\n\n### As Server Middleware\n\n#### Install\n\n```sh\n# Pick the one that matches your server framework\nyarn add graphql-playground-middleware-express  # for Express or Connect\nyarn add graphql-playground-middleware-hapi\nyarn add graphql-playground-middleware-koa\nyarn add graphql-playground-middleware-lambda\n```\n\n#### Usage with example\n\nWe have a full example for each of the frameworks below:\n\n- **Express:** See [packages/graphql-playground-middleware-express/examples/basic](https://github.com/prisma/graphql-playground/tree/master/packages/graphql-playground-middleware-express/examples/basic)\n\n- **Hapi:** See [packages/graphql-playground-middleware/examples/hapi](https://github.com/prisma/graphql-playground/tree/master/packages/graphql-playground-middleware-hapi/examples/basic)\n\n- **Koa:** See [packages/graphql-playground-middleware/examples/koa](https://github.com/prisma/graphql-playground/tree/master/packages/graphql-playground-middleware-koa/examples/basic)\n\n- **Lambda (as serverless handler):** See [serverless-graphql-apollo](https://github.com/serverless/serverless-graphql-apollo) or a quick example below.\n\n### As serverless handler\n\n#### Install\n\n```sh\nyarn add graphql-playground-middleware-lambda\n```\n\n#### Usage\n\n`handler.js`\n\n```js\nimport lambdaPlayground from 'graphql-playground-middleware-lambda'\n// or using require()\n// const lambdaPlayground = require('graphql-playground-middleware-lambda').default\n\nexports.graphqlHandler = function graphqlHandler(event, context, callback) {\n  function callbackFilter(error, output) {\n    // eslint-disable-next-line no-param-reassign\n    output.headers['Access-Control-Allow-Origin'] = '*'\n    callback(error, output)\n  }\n\n  const handler = graphqlLambda({ schema: myGraphQLSchema })\n  return handler(event, context, callbackFilter)\n}\n\nexports.playgroundHandler = lambdaPlayground({\n  endpoint: '/dev/graphql',\n})\n```\n\n`serverless.yml`\n\n```yaml\nfunctions:\n  graphql:\n    handler: handler.graphqlHandler\n    events:\n    - http:\n        path: graphql\n        method: post\n        cors: true\n  playground:\n    handler: handler.playgroundHandler\n    events:\n    - http:\n        path: playground\n        method: get\n        cors: true\n```\n\n## Development [![npm version](https://badge.fury.io/js/graphql-playground.svg)](https://badge.fury.io/js/graphql-playground)\n\nThis is a mono-repo setup containing packages for the `graphql-playground` and `graphql-playground-electron`.\n\n```sh\n$ cd packages/graphql-playground\n$ yarn\n$ yarn start\n```\n\nOpen\n[localhost:3000/localDev.html?endpoint=https://api.graph.cool/simple/v1/swapi](http://localhost:3000/localDev.html?endpoint=https://api.graph.cool/simple/v1/swapi) for local development!\n\n<a name=\"help-and-community\" />\n\n## Help & Community [![Slack Status](https://slack.graph.cool/badge.svg)](https://slack.graph.cool)\n\nJoin our [Slack community](http://slack.graph.cool/) if you run into issues or have questions. We love talking to you!\n\n[![](http://i.imgur.com/5RHR6Ku.png)](https://www.graph.cool/)\n","license":"MIT","scripts":{"tsc":"tsc -p tsconfig.build.json","bump":"npm version patch --no-git-tag-version && git add package.json","lint":"tslint \"src/**/*.ts{,x}\"","test":"jest","build":"rimraf dist build dist && yarn build-app && yarn build-package","start":"node scripts/start.js","prettier":"prettier --single-quote --no-semi --trailing-comma all --write *.{ts,tsx} 'src/**/*.{ts,tsx}'","build-app":"node scripts/build.js","precommit":"lint-staged","bundlesize":"bundlesize","build-package":"rimraf lib build/dist && npm run tsc && babel lib -d lib && cp -r ./src/assets/ ./lib/assets/ && cd lib && rimraf *.jsx;","graphql-faker":"graphql-faker ./tests/schema.faker.graphql","start:analyze":"ANALYZE_BUNDLE=true node scripts/start.js","prepublishOnly":"yarn build","start:graphql-bin":"ACTIVE_APP=graphqlbin node scripts/start.js"},"typings":"./lib/lib.d.ts","_npmUser":{"name":"timsuchanek","email":"tim.suchanek@gmail.com"},"homepage":"https://github.com/graphcool/graphql-playground#readme","bundlesize":[{"path":"build/static/js/index.js","maxSize":"674 kB"}],"repository":{"url":"git+ssh://git@github.com/graphcool/graphql-playground.git","type":"git"},"_npmVersion":"6.9.0","description":"GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).","directories":{},"lint-staged":{"gitDir":"../../","*.{ts,tsx}":["prettier --single-quote --no-semi --write","tslint","git add"]},"maintainers":[{"name":"divyenduz","email":"mail@divyendusingh.com"},{"name":"huvik","email":"huvikjee@gmail.com"},{"name":"schickling","email":"schickling.j@gmail.com"},{"name":"timsuchanek","email":"tim.suchanek@gmail.com"}],"resolutions":{"**/graphql":"^0.11.7","**/**/graphql":"^0.11.7"},"_nodeVersion":"10.16.0","contributors":[{"name":"Tim Suchanek","email":"tim@graph.cool"},{"name":"Johannes Schickling","email":"johannes@graph.cool"},{"name":"Lukas Huvar","email":"lukas@huvar.cz"}],"dependencies":{"cuid":"^1.3.8","react":"^16.3.1","redux":"^3.7.2","lodash":"^4.17.11","marked":"^0.3.19","graphql":"^0.11.7","js-yaml":"^3.10.0","keycode":"^2.1.9","graphiql":"^0.11.2","prettier":"^1.13.0","reselect":"^3.0.1","cryptiles":"4.1.2","immutable":"^4.0.0-rc.9","react-dom":"^16.3.1","codemirror":"^5.38.0","prop-types":"^15.6.0","redux-saga":"^0.16.0","apollo-link":"^1.0.7","markdown-it":"^8.4.1","react-modal":"^3.1.11","react-redux":"^5.0.6","query-string":"5","react-helmet":"^5.2.0","redux-actions":"^2.2.1","utility-types":"^1.0.0","apollo-link-ws":"1.0.8","calculate-size":"^1.1.1","zen-observable":"^0.7.1","lodash.debounce":"^4.0.8","redux-immutable":"^4.0.0","@types/lru-cache":"^4.1.1","apollo-link-http":"^1.3.2","isomorphic-fetch":"^2.2.1","prisma-datamodel":"^1.30.0-alpha.4","react-codemirror":"^1.0.0","react-router-dom":"^4.2.2","copy-to-clipboard":"^3.0.8","react-virtualized":"^9.12.0","styled-components":"^4.0.0","codemirror-graphql":"github:timsuchanek/codemirror-graphql#details-fix","react-display-name":"^0.2.3","react-sortable-hoc":"^0.8.3","redux-localstorage":"rc","seamless-immutable":"^7.0.1","react-input-autosize":"^2.2.1","json-stable-stringify":"^1.0.1","prisma-generate-schema":"^1.30.0-alpha.4","react-transition-group":"^2.2.1","react-copy-to-clipboard":"^5.0.1","webpack-bundle-analyzer":"^2.9.2","redux-localstorage-filter":"^0.1.1","subscriptions-transport-ws":"^0.9.5","redux-localstorage-debounce":"^0.1.0","react-addons-shallow-compare":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"22.1.4","chalk":"2.4.1","husky":"0.14.3","dotenv":"5.0.1","enzyme":"^3.3.0","rimraf":"2.6.2","tslint":"5.10.0","promise":"8.0.1","webpack":"3.10.0","filesize":"3.6.1","fs-extra":"5.0.0","babel-cli":"6.26.0","gzip-size":"4.1.0","node-noop":"1.0.0","ts-loader":"3.4.0","babel-core":"6.26.3","bundlesize":"^0.17.0","css-loader":"0.28.11","raw-loader":"0.5.1","strip-ansi":"4.0.0","typescript":"^3.0.1","url-loader":"0.6.2","@types/jest":"22.2.3","@types/node":"10.1.4","cross-spawn":"6.0.5","detect-port":"1.2.3","file-loader":"1.1.11","json-loader":"0.5.7","lint-staged":"6.1.0","@types/react":"16.3.14","babel-loader":"7.1.4","style-loader":"0.20.1","object-assign":"4.1.1","tslint-loader":"3.6.0","@types/deasync":"0.1.0","enzyme-to-json":"^3.3.4","react-dev-utils":"5.0.1","recursive-readdir":"2.2.2","source-map-loader":"0.2.3","svg-inline-loader":"0.8.0","babel-preset-react":"6.24.1","webpack-dev-server":"2.11.1","why-did-you-update":"0.1.1","babel-preset-es2015":"6.24.1","babel-preset-es2016":"6.24.1","html-webpack-plugin":"2.30.1","babel-preset-stage-3":"6.24.1","@types/zen-observable":"^0.5.3","http-proxy-middleware":"0.17.4","jest-localstorage-mock":"^2.2.0","enzyme-adapter-react-16":"^1.1.1","graphql-playground-html":"1.5.6","webpack-manifest-plugin":"1.3.2","typescript-styled-plugin":"^0.11.0","tslint-graphcool-frontend":"0.0.3","sw-precache-webpack-plugin":"0.11.5","extract-text-webpack-plugin":"3.0.2","connect-history-api-fallback":"1.5.0","babel-plugin-styled-components":"^1.8.0","case-sensitive-paths-webpack-plugin":"2.1.2"},"_npmOperationalInternal":{"tmp":"tmp/graphql-playground-react_1.7.22-test_1560418577902_0.04632992288953641","host":"s3://npm-registry-packages"},"_id":"graphql-playground-react@1.7.22-test","version":"1.7.22-test"}