{"id":22728102,"url":"https://github.com/focusreactive/storybook-graphql-quick-start","last_synced_at":"2026-04-19T04:33:25.630Z","repository":{"id":39299683,"uuid":"226592701","full_name":"focusreactive/storybook-graphql-quick-start","owner":"focusreactive","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T02:32:24.000Z","size":2634,"stargazers_count":2,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T00:26:47.554Z","etag":null,"topics":["addon","boilerplate","development","graphcms","graphql","query","storybook"],"latest_commit_sha":null,"homepage":"https://focusreactive.github.io/storybook-graphql-quick-start","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/focusreactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-08T00:12:07.000Z","updated_at":"2022-03-12T01:09:10.000Z","dependencies_parsed_at":"2023-02-03T06:15:31.662Z","dependency_job_id":null,"html_url":"https://github.com/focusreactive/storybook-graphql-quick-start","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/focusreactive/storybook-graphql-quick-start","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-quick-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-quick-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-quick-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-quick-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focusreactive","download_url":"https://codeload.github.com/focusreactive/storybook-graphql-quick-start/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-quick-start/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31995031,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","boilerplate","development","graphcms","graphql","query","storybook"],"created_at":"2024-12-10T17:14:38.106Z","updated_at":"2026-04-19T04:33:25.602Z","avatar_url":"https://github.com/focusreactive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Graphql Quick Start\n\nBoilerplate project with:\n\n- Storybook\n- Storybook-addon-GraphCMS\n- Configured GraphQL tools\n- Demo connection to Github GraphQL API\n\n[Demo](https://focusreactive.github.io/storybook-graphql-quick-start)\n\nOut of the box you will have a Storybook based project ready to start writing GraphQL queries and preview the result\n\n![demo app](docs/storybook.png)\n\nThis project is complementary to the [Storybook Addon Graphcms](https://github.com/focusreactive/storybook-addon-graphcms)\n\n### Quick Start\n\n```shell\ngit clone https://github.com/focusreactive/storybook-graphql-quick-start.git\ncd storybook-graphql-quick-start\nyarn\nyarn start\n```\n\nyou can use npm as well\n\nAs soon as Storybook is builded open http://localhost:6006/ in your browser\n\nNow you are ready to switch to your GraphQL endpoint and start writing your own queries\n\n### Writing queries\n\nStart with `queries/users.graphql`. If you edit it when Storybook is launched it will auto update immediately after save a file.\n\nThis project is configured to fetch introspection from GraphQL endpoint. It enables such features as query types checking and intelligent suggestion in you IDE\n\n\u003eNote: If you are using VS Code consider installing `prisma.vscode-graphql` extension to enable GraphQL features in your IDE\n\n\nIn order to add query result to Storybook, you need to create a \"story\" for that. See `queries/users.stories.js` for an example.\n\n### Passing variables\n\nNote how we can pass variables to your queries:\n\n`vars: { org: 'storybookjs' }` - this is the list of variables that will be passed directly\n\n`searchVars: { user: 'UsulPro' }` - those variables will appear in the addon panel and users can write own values. For example in the demo project you can input a Github user nickname to inspect a user.\n\n\n### Configuring endpoint\n\nUsually you need to set your GraphQL endpoint URL and Auth Token. The easiest way to do it is to specify them in the `.env` file.\n\nSee more settings in `.storybook/config.js`\n\n### Documentation\n\nSee API references on Storybook-Addon-GraphCMS project readme\n\nhttps://github.com/focusreactive/storybook-addon-graphcms#api\n\nIf you're looking for a way to add this addon to your existing project manually you'll find documentation there as well.\n\n### Scripts\n\n`yarn start` or `yarn dev` to launch Storybook locally\n\n`update` - to update GraphQL schema introspection\n\n`deploy:storybook` - to deploy your project to Github pages (if you're hosting your project on github)\n\n### Tools\n\nHere is a list of tools used in this project with links to documentation\n\n[GraphQL](https://graphql.org/) GraphQL is a modern query language for server API\n\n[Storybook](https://storybook.js.org/)  Storybook is an open-source tool for developing *(not only)* UI components in isolation for React, Vue, and Angular.\n\n[graphql-config](https://github.com/kamilkisiela/graphql-config) One configuration for all your GraphQL tools (supported by most tools, editors \u0026 IDEs)\n\n[graphql-cli](https://github.com/Urigo/graphql-cli) Command line tool for common GraphQL development workflows\n\n[graphql-loader](https://github.com/samsarahq/graphql-loader) A webpack loader for .graphql documents\n\n[storybook-addon-graphcms](https://github.com/focusreactive/storybook-addon-graphcms) Write GraphQL queries and pass response data to your components\n\n[storybook-deployer](https://github.com/storybookjs/storybook-deployer) Deploy your storybook as a static site\n\n[github-actions](https://help.github.com/en/actions/automating-your-workflow-with-github-actions) Automating your workflow with GitHub Actions\n\n*Recommended:*\n\n[vscode-graphql](https://github.com/prisma-labs/vscode-graphql) VSCode GraphQL extension (autocompletion, go-to definition, syntax highlighting)\n\n### Github GraphQL API\n\nThis project includes initial settings for Github Graphql API. There is a demo token with read only access. Don't use it for development your project. If you are looking for creating Github service create your own token. See documentation here.\n\nhttps://developer.github.com/v4/guides/intro-to-graphql/#discovering-the-graphql-api\n\n## Contributing\n\nAny contribution are welcome to this project! Feel free to open an issue or start a PR.\n\nTo develop this project:\n\n1. git clone\n2. yarn\n3. yarn dev\n4. open http://localhost:6006\n\nfor contributing to Storybook-Addon-GraphCMS see that project page:\n\nhttps://github.com/focusreactive/storybook-addon-graphcms\n\n\n## Credits\n\n\u003cdiv align=\"left\" style=\"height: 16px;\"\u003eCreated with ❤︎ to \u003cb\u003eGraphCMS\u003c/b\u003e and \u003cb\u003eGraphQL\u003c/b\u003e community by \u003ca href=\"https://twitter.com/UsulPro\"\u003eOleg Proskurin\u003c/a\u003e at \u003ca href=\"https://twitter.com/FocusReactive\"\u003eFocusReactive\u003c/a\u003e\n\u003c/div\u003e\n\n2019\n\n[![FocusReactive](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/focusreactive-logo.svg?sanitize=true)](https://focusreactive.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fstorybook-graphql-quick-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocusreactive%2Fstorybook-graphql-quick-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fstorybook-graphql-quick-start/lists"}