Storybook GraphQL Kit

编写 GraphQL 查询并将响应数据传递给您的组件 **或仅显示它们**

为什么要使用它

1. 开发组件

使用实际的后台存储数据，以隔离方式开发您的组件。使用此插件，您可以将查询添加到您的故事，并使用获取的数据作为组件的道具。您可以灵活地将其与单个组件一起使用，或返回一个组件数组 - 您需要的只是编写故事。

Screenshot1

2. 浏览数据库

您可以简单地使用 Storybook 和此插件来快速开发工具以浏览您的 GraphQL 端点。只需编写您想要显示的数据的查询，它将以表格形式输出。如果您在查询中包含数组、嵌套对象或图像，它将被转换为友好的可见形式。非常适合在团队内部记录内容。

Screenshot2

使用

安装插件

yarn add --dev @focus-reactive/storybook-graphql-kit

将插件添加到您的 Storybook

// addons.js

import "@focus-reactive/storybook-graphql-kit/register";

配置插件

// config.js or in your stories.js
import { addDecorator } from '@storybook/react';
import { withGraphQL } from "@focus-reactive/storybook-graphql-kit";

addDecorator(
  withGraphQL({
    endpoint: YOUR_GRAPHQL_ENDPOINT,
    token: YOUR_GRAPHQL_TOKEN,
  })
);

编写故事

// stories.js

import { QueryParams } from '@focus-reactive/storybook-graphql-kit';

export default {
  title: 'Browse GraphQL',
};

// write a query in your preferred way
const query = /* GraphQL */ `
  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $name: String) {
    result: speakers(
      where: {
        conferenceEvents_some: { year: $eventYear, conferenceBrand: { title: $conferenceTitle } }
        name_contains: $name
      }
    ) {
      id
      bio
      name
      talks {
        title
      }
      avatar {
        mimeType
        url
      }
    }
  }
`;

// In Storybook v.5 you can simply export you stories from `stories.js` files. You can use `storiesOf(...).add(...)` syntax if prefer
export const speakers = ({ graphQlResponse }) => {
  const data = graphQlResponse.result;
  return null;
  // or pass data to your components
};

// You need to pass parameters to your story
speakers.story = {
  name: 'Conference Speakers',
  parameters: QueryParams({
    query,
    vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },
    searchVars: { name: '' },
    isConnected: true,
  }),
};

注意一些细节

请查看我们如何从故事函数中返回 null。在这种情况下，将使用默认 UI 以表格形式显示数据。如果您只是想快速查看请求结果，这很有用。
如果您从故事中返回一个 React 组件，它将像普通的 Storybook 故事一样工作，除了传递给函数的 story 上下文 中的额外字段，该字段将包含获取的数据。您的故事将 **仅在** 成功接收到数据后才会渲染，因此 ({ graphQlResponse: { result } }) 始终包含您查询的结果。
您可以将变量传递给 vars 和 searchVars 字段，作为您通常对 GraphQL 请求所做的那样。searchVars 的区别在于，插件面板中将有输入字段，用户可以使用这些字段进行搜索。
传递给 withGraphQL 和 QueryParams 的设置会在使用之前合并为一个对象。您可以按任意顺序传递它们，甚至只使用其中一个。只需以最适合您的方式进行操作即可。

您可以 import { Query } from '@focus-reactive/storybook-graphql-kit'; 并通过此辅助程序传递所有选项，而不是像上面那样将选项传递给故事。

import { Query } from '@focus-reactive/storybook-graphql-kit';

export const speakers = Query({
  name: 'Conference Speakers',
  query,
  vars: { conferenceTitle: 'React_Day_Berlin', eventYear: 'Y2019' },
  searchVars: { name: '' },
  viewId,
});

它完全相同，但更简洁，尤其是在您只想使用默认视图时。

功能

如果您只想查看查询结果，则无需编写 stories 或甚至使用 React。它有一个方便的默认 UI 来显示您的数据。
扩展嵌套对象以在平面表中显示
检测带有图像源的 url 字段并输出它们
插件面板中用于 GraphQL 变量的输入字段
处理 GraphQL 请求，仅在成功接收数据后渲染故事
适用于任何 GraphQL 端点

API

您需要将选项传递给插件。您可以直接将它们作为故事参数传递，也可以使用 withGraphQL 装饰器或 Query 辅助程序传递。


import { Query } from '../../addon/decorator'

export const pages = Query({ ...options });

适用于任何 GraphQL 服务的通用选项

endpoint - 您的 GraphQL 项目端点

token - GraphQL 身份验证令牌

query - 您的 GraphQL 查询

vars - GraphQL 变量

searchVars - 您将在插件面板中设置的 GraphQL 变量

故事选项

name - 故事的名称

story - 故事函数（如果您不使用 Storybook 原生语法）

编写故事

当您使用自己的组件编写故事时，您可以访问原始查询响应以及解析后的结果。


export const yourStory = ({ graphQlResponse }) => {
  // Result of your query. Usually what you want to use for components inside your App
  const data = graphQlResponse.result;
  // Array with information about fetched fields. The same that used for displaying default table
  const columns = graphQlResponse.columns;
  // Array of receiving objects. Works fine together with `columns` to output the parsed data
  const rows = graphQlResponse.rows;

  return data.map(props => <YouComponent {...props} />)
};

graphQlResponse.columns 和 graphQlResponse.rows 在您创建自己的工具来显示 GraphQL 数据时很有用。否则，请使用 graphQlResponse.result。

基于 Storybook-GraphQL-Kit 创作自己的插件

您可以使用 API 来扩展此插件，以使用您自己的接收数据表示形式。

import { withGraphQL } from '@focus-reactive/storybook-graphql-kit';

const customRenderer = ({ key, value, ind, options }) => {
  if (key !== 'featured field') return null;

  return {
    id: key,
    getLabel: () => `${key}`,
    getValue: () => value,
    // return your custom React component or null for using `getValue`
    render: () => <CustomComponent/>,
  };
};

export const withYourServiceFeatures = withGraphQL
   .addRender(customRenderer)
   .addRender(customRenderer1)
   .addRender(customRenderer2);

请查看 https://github.com/focusreactive/storybook-graphql-kit-graphcms 作为如何扩展和创建新插件的示例。