如何在Storybook中使用Apollo React钩子？
Storybook是一个用于开发、测试和文档化UI组件的工具。它提供了一个独立的开发环境，可以让开发人员在不依赖于整个应用程序的情况下构建和展示组件。
Apollo React是一个用于构建GraphQL客户端的库，它提供了一组React钩子，用于在React组件中管理GraphQL数据。
要在Storybook中使用Apollo React钩子，可以按照以下步骤进行操作：
- 确保已经安装了Storybook和Apollo React依赖：
- 确保已经安装了Storybook和Apollo React依赖：
- 创建一个Storybook配置文件（通常是.storybook/main.js），并添加Apollo Provider：
- 创建一个Storybook配置文件（通常是.storybook/main.js），并添加Apollo Provider：
- 在这个配置文件中，我们创建了一个Apollo Client实例，并将其作为ApolloProvider的prop传递给Story组件。
- 创建一个Storybook故事（通常是.stories.js文件），并使用Apollo React钩子：
- 创建一个Storybook故事（通常是.stories.js文件），并使用Apollo React钩子：
- 在这个故事中，我们使用了useQuery钩子来执行GraphQL查询，并根据加载状态和错误状态渲染不同的UI。
- 运行Storybook并查看组件：
- 运行Storybook并查看组件：
- Storybook将启动一个本地开发服务器，并在浏览器中展示组件。你可以在Storybook中查看和交互你的组件，并且Apollo React钩子将在Storybook环境中正常工作。
这是在Storybook中使用Apollo React钩子的基本步骤。通过使用Apollo React钩子，你可以方便地在Storybook中管理和展示与GraphQL相关的数据。对于更复杂的场景，你还可以使用其他Apollo React钩子（如useMutation和useSubscription）来处理数据的更新和实时性需求。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-world
相关·内容
我正在开发一个使用Storybook模拟组件的React项目。我们最近引入了Apollo react钩子(即useQuery)来获取一些组件的数据。;}
export default Component; 如何在Storybook中模拟<Component />？我能找到的documentation似乎依赖
浏览 23提问于2020-04-10得票数 1
我在一个typescript react项目中使用storybook，我遇到了一些编译错误，比如 Could not find a declaration file for module '@storybook'/material-ui-es/node_modules/@storybook/addon-actions/dist/index.js' implicitly has an 'any' t
浏览 13提问于2019-05-27得票数 0
回答已采纳
在Storybook中使用MockedProvider似乎不会返回任何内容。预期结果：const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS示例故事：import { M
浏览 6提问于2020-05-16得票数 2
我们正在使用storybook来构建ui组件。Ui组件与一些数据相关，在本例中是REST-Server。在操作中，我可以添加自定义数据，但我希望通过axios加载数据。问:可以从storybook UI中为storybook设置全局参数吗？比如服务器url和auth token？
浏览 14提问于2019-11-05得票数 0
回答已采纳
我觉得我已经尝试了app.yaml和next.config.js中的所有东西，所以我只是在问，要让NextJs应用程序在Google app Engine上运行，正确的配置是什么？>实例并使用下面的app.yaml。以下是我使用的模块的版本。": "^1.6.3", "apollo-link-http": "^1.5.16"
浏览 43提问于2019-11-01得票数 2
回答已采纳
1回答
我开始从阿波罗客户端2.x迁移到3.x测试版，我在使用阿波罗钩子和现在不推荐的查询/突变组件时遇到了困难。我用的是包裹：@apollo/react-components: 3.1.3
在本例中，使用阿波罗钩子工作得很好，但是使用查询组件，我得到以下错误将根组件包装在via选项中，或将ApolloClient实例传递给via选项。
浏览 5提问于2019-11-08得票数 5
回答已采纳
因此，我想使用阿波罗客户端反应钩子"useQuery“来查询运行阿波罗服务器的graphql后端。我的ApolloClient和提供程序设置如下：import React from 'react';import{ BrowserRouter as Router } from 'react-router-dom';
import
浏览 1提问于2020-01-24得票数 0
回答已采纳
1回答
我正在尝试使用ReactiveAlolon2.1为组件提供一个模拟模式。但是，它返回此错误。_this.getQueryResult (react-apollo.browser.umd.js:319)您是如何在Reflecolol2.1上添加模拟功能的？index.stories.js
import React from 'react</em
浏览 1提问于2018-04-23得票数 1
回答已采纳
1回答
我有一个使用Apollo钩子库的useQuery钩子的React组件。我在测试这个组件时遇到了问题。这是我当前的设置。import React from 'react';import DashboardBar} from '@apollo/reac
浏览 5提问于2019-07-16得票数 7
我的工作是制作一个React /Component，以便在我们的产品内部使用。在开发和展示故事簿时，一切都很好。虽然在一个通用项目中从create应用程序中对库进行了开箱即用的测试，但是导入和实现不带React的组件是可以的，但是当我们使用用钩子生成的组件时，无效的钩子调用错误显示：。尝试了这里列出的所有内容(并阅读并尝试了页面上链接的github线程解决方案)，而组件只使用了useRef()和其他任何东西，因此我们知道没有任何规则被违反、反
浏览 0提问于2019-10-18得票数 5
回答已采纳
使用MockedProvider呈现最终状态的推荐方法是使用'waait‘等待事件循环的下一个滴答。但是，当使用故事书中的故事截图时，在创建树的那一刻和快照的那一刻之间，您不能访问测试体来注入这个等待。
正因为如此，在快照拍摄时，加载状态就是您在那里看到的。
浏览 1提问于2018-09-03得票数 1
每当我在Storybook Navigator中导航到新的Story时，都会发生这种情况。谢谢!property 'currentContext' -> object with constructor 'Object'
--- property 'hooks' closes the circle 我使用的是React Native 0.61.5和@storybook/react-native 5.3.9 ?
浏览 29提问于2020-01-30得票数 2
回答已采纳
Apollo的<Mutation>组件通常工作得很好，但有时您需要在render()方法之外调用突变。在某些情况下，您可以简单地传递变异函数，如下所示：import { DO_MUTATION } from "./mutations";
export def
浏览 43提问于2019-06-03得票数 6
回答已采纳
我目前正在尝试使用React和Apollo创建一个应用程序。在上下文中找不到"client“或作为选项传入。将根组件包装在中，或者通过选项传递一个ApolloClient实例。, graphql } from 'react-apollo'; children: (/reportWeb
浏览 0提问于2021-01-14得票数 1
3回答
: Maybe<User>;}; 在我的组件中，我将该类型应用于useQuery挂钩 const { data, loading, error } = useQuery<Feed>(FETCH_LINKS); 问题是，在data变量中，我接收到一个如下形状的对象： { __typename count} 因此，为了遍历链接数组并在页面上呈现它们
浏览 44提问于2020-06-29得票数 4
回答已采纳
我正在尝试将'Data‘结构元素从apollo钩子调用转换为一个可以在React中传递以呈现的数组。这是我使用'@apollo/react-hooks‘库的钩子调用。
浏览 1提问于2020-02-25得票数 0
2回答
SomeConnectionComponent someprop={something}></SomeConnectionComponent > 在这两个示例中，为什么要将应用程序和SomeStateFullComponent包装在ApolloProvider和SomeConnectionComponent中？这里应用的React概念是什么？这段代码中发生了什么？
浏览 16提问于2020-07-06得票数 0
以下是我所做的import { useQuery } from '@apollo/client';import { renderHook } from '@testing-library/react-hooks';
import { MockedProvider} from '@apollo&#
浏览 5提问于2022-02-25得票数 2
我正在使用带有钩子和Apollo Client 3的React functional components。我可以使用useLazyQuery来检查正在使用它的组件的加载状态，但是否可以使用Apollo自己的API在单独的组件中检查相同查询的加载状态，即不传递props或使用React的上下文？
浏览 6提问于2020-02-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
