问题标签 [react-apollo-hooks]

我正在开发一个使用 Storybook 模拟组件的 React 项目。我们最近引入了 Apollo react 钩子（即useQuery）来获取某些组件的数据。例子：

如何<Component />在 Storybook 中模拟？我能找到的文档似乎依赖于 Apollo<Query />组件而不是钩子。

或者答案仅仅是将这些数据获取步骤移动到父“包装器”组件中并且只模拟子组件？我宁愿不这样做，因为在某些情况下我想模拟一个父组件，例如，一个孙子组件有自己的useQuery钩子。将所有下游数据获取拉入组件层次结构中的包装器方式感觉就像违反了事物应尽可能原子化和模块化的原则。

如果用户使用现有的 JWT cookie 返回我的网站，我想检查它们是否仍然有效。我想我想通过在服务器上测试我的身份验证令牌来在应用程序加载时预加载我的缓存。

这是检查令牌是否仍处于活动状态的好方法/地方吗？是的，每次调用服务器都会对此进行测试，但我想显示登录状态。我应该在每个需要对登录状态做出反应的组件中调用吗？似乎效率低下。

这就是我的想法，但它不能验证访问令牌是否仍然有效。我可以在这里运行查询吗？那会是什么样子？

我正在学习 React/Apollo，当我引入错误时，我的 Chrome 控制台中出现了典型的红色异常。但是，对于 Apollo，它并没有告诉我错误在我的代码中从哪里开始，就像在 React 或其他框架中一样。当使用在多个组件中触发查询的钩子时，查找问题根源的速度非常慢。

您是否使用任何技巧来调试您的 Apollo 代码，或者您能以某种方式改进错误反馈？

这是我看到的：

由于Hooks 的规则，不应该有条件地调用 hooks。那么如何有条件地使用 获取数据useQuery呢？例如，假设我想在功能组件中获取数据，但前提是someState === someValue? 即我想避免useQuery()在任何条件之前调用，因为在这些时间获取数据没有意义。

我收到无效的嵌套查询挂钩调用

和 usereadNotifications 来自

我有一个步进表单，它使用 GraphQL/Apollo 和 React 在两个不同的地方插入数据。

这是代码：

第一个插入打开：

第二个插入打开：

这些事件在按钮中调用：

但是，当我单击按钮时，出现此错误：

当访问我的数据库时，我看到在一次调用中使用这部分代码保存了 50 个令牌：

我认为因为我使用了一个钩子，我得到了一个响应，这个响应给我带来了这个错误，问题是，为什么我要在一个调用中保存和接收 50 个令牌？

问题：

你好，所以我在我的 ReactJS 应用程序上使用 apollo-client 已经有一段时间了。我刚刚注意到，有时当我使用useQuery钩子时，执行完全忽略了skip参数，并继续执行onCompleted（尽管没有任何数据）。有趣的是，它也不会向我的端点发出 API 请求。但是，如果我只是设置skip为 false，那么一切正常（如预期的那样）。

此外，每次我使用useQuerywith时都不会发生这种情况skip，它似乎适用于某些而不是其他。

为什么 apollo 会忽略skip参数并onCompleted立即使用空数据执行？有没有修复（除了useLazyQuery）？

代码示例：

补充说明：

• 从 onCompleted 函数记录道具的输出是props => undefined。

• 我添加skip: true只是为了证明它实际上不起作用。

• 如果我记录userQuery自己，那么立即在第一个记录上，userQuery.called等于 true（但就像我之前所说的，实际上没有执行任何 API 调用）

依赖项

笔记：

useLazyQuery似乎工作正常，因此作为一种解决方法，同时您可以结合使用它useEffect来获得类似的结果。

当我未登录时，我收到此错误：

它发生在这个代码块中：

我真的希望它能够被优雅地处理，但它只会使 React 崩溃并抛出错误，尽管在选项中设置了错误策略和 onError。

当 create-react-app 重新启动时，它似乎陷入了这个错误循环。

我有一个问题，我们正在使用 apollo 客户端，特别是 useMutation react 挂钩来执行对我们的 GraphQL 服务器的突变调用。在某些时候，服务器可能会返回 401 未经授权的响应——此时，我们可以调用特殊的端点来重新验证客户端并刷新 cookie/令牌。一旦客户端被重新验证，我希望能够再次重新运行相同的突变。所以基本上我想知道是否可以执行以下操作： useMutation --> Receive 401 Unauthorized --> 调用刷新令牌 --> 重新运行相同的初始突变 这就是我们的 useMutation 的样子：

这就是我们目前的称呼：

因为我们正在使用钩子以及我们在上面使用它的方式，所以我不完全确定我们如何保存或重用最初在第一个突变中发送的相同数据（即突变参数）是否有可能使用我们目前的方式这样做？

这是重现问题的 Codesandbox 链接： https ://codesandbox.io/s/boring-nash-svcj7?file=/src/index.js

我有一个奇怪的问题。我有一个非常简单的设置 Apollo 设置，仅用于测试目的。它是这样的：

它只是一个简单的 ApolloProvider，为 App 组件提供客户端。App 组件只有一行。

现在，当我刷新页面时，出现此错误：

有谁知道这里发生了什么？

为什么我不能在我的组件内部使用一个简单的钩子？

这是完整的代码：

有一个我正在关注的例子，它确实有效，所以我不确定为什么我的例子不是。

https://codesandbox.io/s/replace-previous-results-with-next-results-nuu6x?file=/src/FilmTitles.jsx:16-24