【文件属性】：
文件名称：storybook-graphql-kit：编写GraphQL查询并将响应数据传递到组件
文件大小：1.19MB
文件格式：ZIP
更新时间：2021-02-03 13:57:13
react graphql documentation development query
故事书GraphQL套件
编写GraphQL查询并将响应数据传递到您的组件或仅显示它们
为什么要使用它
1.开发组件
与实际的后端存储数据隔离地开发组件。 使用此插件，您可以向故事添加查询，并使用获取的数据作为组件的道具。 您可以灵活地将其与单个组件一起使用或返回一组组件-您所需要做的只是编写故事。
2.浏览数据库
您可以简单地使用Storybook和此插件来快速开发工具来浏览GraphQL端点。 只需编写查询即可查询要显示的数据，它将以表格形式输出。 如果查询中有数组，嵌套对象或图像，它将转换为友好的可见形式。 非常适合与您的团队一起记录情况。
用法
安装插件
yarn add --dev @focus-reactive/storybook-graphql-kit
将插件添加到您的故事书
// addons.js
import "@focus-reactive/storybook-graphql-kit/register" ;
配置插件
// config.js or in your stories.js
import { addDecorator } from '@story
【文件预览】：
storybook-graphql-kit-master
----.babelrc(120B)
----addon()
--------config.js(117B)
--------PanelUI()
--------DecoratorUI()
--------decorator.js(2KB)
--------register.js(582B)
--------lib()
----.storybook()
--------config.js(689B)
--------addons.js(114B)
--------webpack.config.js(514B)
----docs()
--------screenshot-example2.png(315KB)
--------graphcms-logo.png(1KB)
--------panel-with-json.png(49KB)
--------focusreactive-logo.svg(7KB)
--------logo.png(5KB)
--------screenshot-example3.png(249KB)
--------screenshot-example1.png(359KB)
--------graphql.png(3KB)
--------storybook-logo.png(2KB)
----package.json(3KB)
----.prettierrc(85B)
----.env(313B)
----src()
--------speakers-query.js(447B)
--------stories()
--------serviceWorker.js(5KB)
--------UserAvatar.js(294B)
----.npmignore(74B)
----.eslintrc.js(1KB)
----register.js(860B)
----.gitignore(316B)
----public()
--------logo192.png(8KB)
--------manifest.json(492B)
--------robots.txt(57B)
--------index.html(2KB)
--------logo512.png(22KB)
--------favicon.ico(22KB)
----README.md(8KB)
----yarn.lock(586KB)
----nodemon.json(74B)