前言
在前端项目开发中，使用 storybook 和 apollo-client 这两个库可以帮助我们更好地编写和测试组件。而 apollo-storybook-core 则可以方便地集成这两个库，进一步提高开发效率。
安装
在使用 apollo-storybook-core 之前，首先需要确保已经安装好了 Node.js 和 npm，在命令终端输入以下命令安装该包：
npm install --save-dev apollo-storybook-core
使用方法
- 安装依赖
npm install --save-dev @storybook/react react-apollo graphql-tag graphql
- 创建 .storybook 文件夹并在该文件夹下创建 main.js 文件，其内容如下：
-- -------------------- ---- -------
-------------- - -
-------- ----------------------------
------- -
---------------------------
-------------------------
------------------------------
-------------------
--
--- 在项目根目录创建 .env 文件，并将如下代码添加到其中：
REACT_APP_GRAPHQL_URI = http://localhost:4000/graphql
- 在项目根目录创建文件夹 config，并在其中创建 apollo.ts 文件，并将如下代码添加到其中：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------
------ - ------------ - ---- ----------------
------ - -------- - ---- -------------------
------ ----- ------ - --- --------------
------ --- ----------------
----- --- ----------
---- ----------------------------------
------------ --------------
---
---- 编写、导入和注册你的组件和查询
在项目中编写你的组件和查询，并在 storybook 中导入并注册它们。例如，在 src/ 目录下创建 Button.tsx 文件：
-- -------------------- ---- ------- ------ ----- ---- -------- --------- ----- - ------ ------- -------- -- -- ----- - ------ ----- ------- --------------- - -- ------ ------- -- -- - ------- ---------------------------------- --
然后，创建 Button.stories.tsx 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ - ----- - ---- ---------------
------ --- ---- --------------
-- ------
----- ----- - ----
----- -
-----
-
--
------ ------- -
------ ---------
---------- -------
--
----- -------- - ------ -- -
------ --------------
--- -------- ----- ----- -- -- -
-- --------- ------ ----------------------
-- ------- ------ ----------- ----------------------
------ ------- --------- ------------------ ---
--
--------
--
------ ----- ------- - ------------------
------------ - -
-------- -- -- ---------------------
--最后，在命令终端中输入以下命令启动 storybook：
npm run storybook
你应该可以看到 Button 组件和查询的预览。现在可以通过 apollo-storybook-core 方便地测试组件的各种状态和交互。
总结
以上是 npm 包 apollo-storybook-core 的使用方法介绍。通过使用该包，可以更加方便地测试前端组件和查询，并提高开发效率。希望本篇文章能给各位前端开发者带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4f19ee8250f93ef89002f4