{"id":22728117,"url":"https://github.com/focusreactive/storybook-graphql-kit-graphcms","last_synced_at":"2026-04-13T16:36:01.979Z","repository":{"id":115478959,"uuid":"232861637","full_name":"focusreactive/storybook-graphql-kit-graphcms","owner":"focusreactive","description":"Storybook Addon for GraphCMS","archived":false,"fork":false,"pushed_at":"2020-01-14T18:57:38.000Z","size":1222,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T00:26:54.898Z","etag":null,"topics":["addon-panel","graphcms","graphql","graphql-data","graphql-service","storybook","write-stories"],"latest_commit_sha":null,"homepage":"https://focusreactive.github.io/storybook-graphql-kit","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-09T17:07:50.000Z","updated_at":"2022-05-23T00:12:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"56345c4d-bc3f-497a-ba97-cb6f78d0babc","html_url":"https://github.com/focusreactive/storybook-graphql-kit-graphcms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/focusreactive/storybook-graphql-kit-graphcms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-kit-graphcms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-kit-graphcms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-kit-graphcms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-kit-graphcms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focusreactive","download_url":"https://codeload.github.com/focusreactive/storybook-graphql-kit-graphcms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fstorybook-graphql-kit-graphcms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31761986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-panel","graphcms","graphql","graphql-data","graphql-service","storybook","write-stories"],"created_at":"2024-12-10T17:14:41.259Z","updated_at":"2026-04-13T16:36:01.960Z","avatar_url":"https://github.com/focusreactive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon GraphCMS [![npm version](https://badge.fury.io/js/%40focus-reactive%2Fstorybook-addon-graphcms.svg)](https://badge.fury.io/js/%40focus-reactive%2Fstorybook-addon-graphcms)\n\n[![Storybook](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/storybook-logo.png)](https://storybook.js.org/)\n[![GraphQL](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/graphql.png)](https://graphql.org/)\n[![GraphCMS](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/graphcms-logo.png)](https://graphcms.com/)\n\nWrite queries in the code, preview GraphQL data in a comfy way, pass response to your components\n\nThis addon is an extension of [Storybook-GraphQL-Kit](https://github.com/focusreactive/storybook-graphql-kit)\n\nRead the [post on medium](https://medium.com/@focus-reactive/storybook-addon-graphcms-9d47e30371df)\n\n## Why you want to use it\n\n### 1. Develop components\n\nDevelop your components in isolation with actual backend stored data. With this addon you can add query to your stories and use fetched data as props for your components. You are flexible to use it with a single component or return an array of components - everything you need is just to write stories.\n\n[live demo](https://usulpro.github.io/storybook-addon-graphcms/?path=/story/with-react-components--ram)\n\n![Screenshot1](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/screenshot-example1.png)\n\nWhile you see your components in Storybook you can also inspect the query response in row JSON via addon Panel. You can even edit manually and temporrary override the result in order to quickly test your components with different values.\n\n![addon-panel](docs/panel-with-json.png)\n\n### 2. Browse database\n\nYou can simply use Storybook and this addon for rapid development of tools to browse your GraphQL endpoint. Just write the queries for data you want to show and it will be outputted as a table. If you have arrays, nested objects or images inside your query it will be turned to friendly visible form. Good for documenting things withing your team.\n\n[live demo](https://usulpro.github.io/storybook-addon-graphcms/?path=/story/speakers--rdb)\n\n![Screenshot2](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/screenshot-example2.png)\n\n### 3. Extend your GraphCMS UI\n\nSame as previous but if you provide you project and view IDs it will be possible to open any entry for editing in your GraphCMS app.\n\n\n[live demo](https://usulpro.github.io/storybook-addon-graphcms/?path=/story/events-react-amsterdam--pages)\n\n![Screenshot3](https://raw.githubusercontent.com/focusreactive/storybook-addon-graphcms/master/docs/screenshot-example3.png)\n\n## Quick Start\n\nClone ready to use boilerplate project. You can use it as a quick start for connecting to **any** GraphQL service. [Demo with Github GraphQL API](https://focusreactive.github.io/storybook-graphql-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\nSee details: https://github.com/focusreactive/storybook-graphql-quick-start\n\n## Usage\n\nPrerequisite: you need to have project with [installed](https://storybook.js.org/docs/guides/quick-start-guide/) Storybook\n\nInstall addon\n\n```shell\nyarn add --dev @focus-reactive/storybook-addon-graphcms\n```\n\nAdd addon to your Storybook\n\n```js\n// addons.js\n\nimport \"@focus-reactive/storybook-addon-graphcms/register\";\n```\n\nConfigure addon\n\n```js\n// config.js or in your stories.js\nimport { addDecorator } from '@storybook/react';\nimport { withGraphCMS } from \"@focus-reactive/storybook-addon-graphcms\";\n\naddDecorator(\n  withGraphCMS({\n    endpoint: YOUR_GRAPHQL_ENDPOINT,\n    token: YOUR_GRAPHQL_TOKEN,\n    // only if using with GraphCMS\n    projectId: YOUR_GRAPHCMS_PROJECT_ID,\n    // only if using with GraphCMS\n    stage: \"master\",\n  })\n);\n\n```\n\nWrite stories\n\n```js\n// stories.js\n\nimport { QueryParams } from '@focus-reactive/storybook-addon-graphcms';\n\nexport default {\n  title: 'Browse GraphQL',\n};\n\n// write a query in your preferred way\nconst query = /* GraphQL */ `\n  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $name: String) {\n    result: speakers(\n      where: {\n        conferenceEvents_some: { year: $eventYear, conferenceBrand: { title: $conferenceTitle } }\n        name_contains: $name\n      }\n    ) {\n      id\n      bio\n      name\n      talks {\n        title\n      }\n      avatar {\n        mimeType\n        url\n      }\n    }\n  }\n`;\n\n// In Storybook v.5 you can simply export you stories from `stories.js` files. You can use `storiesOf(...).add(...)` syntax if prefer\nexport const speakers = ({ graphQlResponse }) =\u003e {\n  const data = graphQlResponse.result;\n  return null;\n  // or pass data to your components\n};\n\n// You need to pass parameters to your story\nspeakers.story = {\n  name: 'Conference Speakers',\n  parameters: QueryParams({\n    query,\n    vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },\n    searchVars: { name: '' },\n    viewId, // view ID only to point a view when using with GraphCMS\n    isConnected: true,\n  }),\n};\n\n\n```\n\nNote some details here:\n\n1. See how we return `null` from the story function. In this case the default UI will be used to display data in a table form. It's useful if you just want to quickly see the results of your request.\n2. If you return a React Component from your story it will behave as regular Storybook story except the additional field in the `story context` passed to the function that will contain fetched data. You story will be rendered **only after** data will be successfully received, so `({ graphQlResponse: { result } })` always has result of your query.\n3. You can pass variables in `vars` and `searchVars` fields to the query as you usually do for GraphQL requests. The difference of `searchVars` is that there will be input fields in the addon panel and users can use them for searching\n4. Settings passed to `withGraphCMS` and to `QueryParams` are merged into one object before using. You can pass them in any order or even use only one of them. Just do it in the most convenient way for you\n\nInstead of passing options to the story how it's shown above you can `import { Query } from '@focus-reactive/storybook-addon-graphcms';` and pass all options via this helper:\n\n```js\nimport { Query } from '@focus-reactive/storybook-addon-graphcms';\n\nexport const speakers = Query({\n  name: 'Conference Speakers',\n  query,\n  vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },\n  searchVars: { name: '' },\n  viewId,\n});\n\n```\n\nIt does totally the same but in more compact way, especially if you only want to have the default view.\n\n## Demo\n\nWe created a simple tool based on this addon to extend GraphCMS App for our content editors:\n\nhttps://focusreactive.github.io/storybook-graphql-kit/\n\nHere we writing queries to control what exact entries should be listed in each folder. Editors can use input fields to find the specific entry. It's easy to display all needed information in front of user even if it contains nested fields. Each entry has a link to the GraphCMS app to start editing it.\n\n\n## Features\n\n1. You don't need to write `stories` or even use `React` if you only want to view the results of queries. It has convenient default UI to display your data.\n2. Expands nested objects to display in flat table\n3. Detects `url` fields with image sources and outputs them\n4. Input fields for GraphQL variables in the addon panel\n5. You can inspect and temporary override the response of your query in the addon panel\n6. Handles GraphQL requests and renders story only with successfully received data\n7. Works fine with any GraphQL endpoint but provides additional features for GraphCMS services\n\n\n## API\n\nYou need to pass options to addon. You can pass them directly as story parameters, with `withGraphCMS` decorator or with `Query` helper.\n\n```js\n\nimport { Query } from '../../addon/decorator'\n\nexport const pages = Query({ ...options });\n\n```\n\n### Common options for any GraphQL service:\n\n`endpoint` - Your GraphQL/GraphCMS project endpoint\n\n`token` - GraphQL/GraphCMS bearer token\n\n`query` - your GraphQL query\n\n`vars` - GraphQL variables\n\n`searchVars` - GraphQL variables you will set in the addon panel\n\n`getData: data =\u003e data.nested.objects` - function for switching to nested objects inside query response. (example: `data =\u003e data.year[0].speakers`)\n\n### GraphCMS specific options:\n\n`projectId` - your project id\n\n`viewId` - The id of your system or custom view in GraphCMS UI\n\n`stage` - stage\n\n### Stories options\n\n`name` - The name of the Story\n\n`story` - Story functions (if you don't use Storybook origin syntax)\n\n### Writing stories\n\nWhen you writing stories with your own components you can access the raw query response alongside with parsed results:\n\n```js\n\nexport const yourStory = ({ graphQlResponse }) =\u003e {\n  // Result of your query. Usually what you want to use for components inside your App\n  const data = graphQlResponse.result;\n  // Array with information about fetched fields. The same that used for displaying default table\n  const columns = graphQlResponse.columns;\n  // Array of receiving objects. Works fine together with `columns` to output the parsed data\n  const rows = graphQlResponse.rows;\n\n  return data.map(props =\u003e \u003cYouComponent {...props} /\u003e)\n};\n```\n\n`graphQlResponse.columns` and `graphQlResponse.rows` are useful if you creating own tool to display your GraphQL data. Otherwise use `graphQlResponse.result`.\n\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 start\n4. open http://localhost:9009\n5. the package code is located inside `addon` folder\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-kit-graphcms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocusreactive%2Fstorybook-graphql-kit-graphcms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fstorybook-graphql-kit-graphcms/lists"}