npm 包 @storybook/addon-graphql 使用教程

随着 GraphQL 的普及，越来越多的前端工程师开始使用它来对接后端的 API。但是，在开发过程中，我们需要不断地测试和调试 GraphQL 查询语句以及查询结果。这时，就需要使用一些可以辅助我们进行 GraphQL 开发的工具。@storybook/addon-graphql 这个 npm 包就是其中之一。它可以帮助我们在 Storybook 中方便地进行 GraphQL 的开发和调试。

什么是 @storybook/addon-graphql

@storybook/addon-graphql 是一个可以在 Storybook 中集成 GraphQL 服务的 npm 包。使用该 npm 包可以方便地在 Storybook 中预览和测试 GraphQL 的查询和结果。它的主要功能包括：

• 在 Storybook 中集成 GraphQL Playground，以方便地编辑和测试 GraphQL 查询。
• 可以在 Storybook 中使用不同的 GraphQL 查询进行组件的渲染，以方便进行组件的开发和测试。
• 可以动态地调整查询参数，以方便地测试查询在不同情况下的效果。
• 支持对 GraphQL 查询的错误进行捕获和显示。

如何使用 @storybook/addon-graphql

下面，我们将详细介绍如何在 Storybook 中使用 @storybook/addon-graphql。

安装

首先，我们需要在项目中安装 @storybook/addon-graphql。可以通过以下命令进行安装：

npm install --save-dev @storybook/addon-graphql

配置

安装完成后，我们需要对 Storybook 进行配置，以便在 Storybook 中使用 @storybook/addon-graphql。

在 .storybook/main.js 中，加入以下内容：

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-graphql',
  ],
};

这样就可以在 Storybook 中使用 @storybook/addon-graphql 了。

使用

使用 @storybook/addon-graphql 很简单，我们只需要在组件的 stories 中加入以下代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- -----------------
------ - ----- - ---- ---------------------------

------ ----------- ---- ----------------

----- ----------- - ----
  ----- --------- -
    ------ -
      --
      ----
    -
  -
--

------ ------- -
  ------ --------------
  ---------- ------------
--

------ ----- ------- - -- -- -
  ------ --------------------
    --- ---- -- -- ------------ ----------- ---
  --------
--
展开代码

其中，Query 组件会将 GET_MY_DATA 查询的结果传递给 MyComponent 组件进行渲染。

使用 @storybook/addon-graphql 的另一个比较好用的特性是，我们可以通过 Query 组件的 variables 属性来动态设置查询的参数，以便测试不同情况下的查询效果。

例如，我们可以这样定义一个带有参数的查询：

const GET_MY_DATA_WITH_VARIABLES = gql`
  query GetMyData($id: ID!) {
    myData(id: $id) {
      id
      name
    }
  }
`;

然后，我们可以通过 variables 来为查询传递参数：

<Query
  query={GET_MY_DATA_WITH_VARIABLES}
  variables={{ id: '123' }}
>
  {({ data }) => <MyComponent data={data} />}
</Query>

在 Storybook 中测试 GraphQL Playground

最后，我们还可以使用 GraphQL Playground 来在 Storybook 中方便地编辑和测试 GraphQL 查询语句。在组件的 stories 中，加入以下代码即可：

export const Playground = () => (
  <Playground
    endpoint="https://my-graphql-endpoint"
    // 在这里设置默认的查询字符串
    query={GET_MY_DATA}
  />
);

这样，在 Storybook 中就可以方便地使用 GraphQL Playground 了。

总结

@storybook/addon-graphql 是一个方便的 npm 包，可以帮助我们在 Storybook 中进行 GraphQL 的开发和测试。通过本文的介绍，我们可以学习到如何安装、配置和使用该 npm 包。希望本文对大家能够有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabccb5cbfe1ea061085e