Storybook GraphQL Kit

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

为什么要使用它

1. 开发组件

使用实际的后端存储数据，独立开发您的组件。使用此插件，您可以将查询添加到您的故事中，并将获取的数据用作组件的 props。您可以灵活地将其与单个组件一起使用，或返回组件数组 - 您需要做的只是编写故事。

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 context中的附加字段，该字段将包含获取的数据。您的故事只有在成功接收数据后才会呈现，因此({ 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作为如何扩展和创建新插件的示例