问题标签 [react-apollo-hooks]

如何将 2 个 graphql 查询与 react-apollo-hooks 一起使用，其中第二个查询取决于从第一个查询中检索到的参数？

我尝试使用 2 个查询，如下所示：

但是，当我运行我的项目时，react-hooks 会给我以下消息：

“index.js:1437 警告：React 检测到 Upgrade 调用 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则”

我想知道如何使用 react-apollo-hooks 来运行依赖于另一个查询的查询。如果事先知道 graphql 查询变量，它会很好用。但是，我没有找到来自其他查询的变量的解决方案。

你可以在这里找到 CodeSandbox

我对 react 很陌生，考虑到不同代码风格在 react 中的流行，我发现将我的第一个应用程序放在一起有点令人困惑。

该应用程序的目的是使用基于表单输入的动态查询来执行 GraphQL 查询。在第一次渲染时，它应该使用状态中提供的数据。当用户更改标准值时，应执行新的 GrapQl。但是，在尝试更改输入值时，只要我按下按钮并且在（！）更新值之前，就会释放一个新请求。

我尝试了不同的方法，但都没有产生任何变化。

这是我的代码和应用程​​序

由于我的 GraphQL 服务器在本地运行，您应该期望得到以下回报：

src/index.js

src/components/charts/charts.js

My expected behavior is that a new GraphQL request is made after pressing the submit button.

The actual behavior is that right now, as soon as I attemp to change the input fields, a new request is made with the existing input. It is not possible to change the input values.

我在反应项目中使用 useMutation 钩子。突变成功运行，但之后没有达到 onCompleted 。

我在突变中将 notifyOnNetworkStatusChange 设置为 true ，但这似乎没有帮助。

我正在使用useLazyQueryApollo 的钩子并进入无限循环。这是我的组件：

在onCompleted选项中，我获取结果并使用回调 ( updateMethod) 来更新我的对象。

我遇到的问题是查询被一遍又一遍地调用。我onCompleted每次都点击它，它调用updateMethod并且我停留在这个无限循环中。onClick仅在单击时才调用（Link我通过将 a 放入 来验证debugger）onClick，所以这一定与useLazyQuery钩子有关。

我通过更改为使用ApolloConsumer组件来解决此问题，但我想了解为什么我会使用钩子进入这种状态。

有任何想法吗？

我有两个突变：

• const [createRecord, {data}] = useMutation(createRecordQuery);它返回新创建记录的 ID
• const [saveValue, {data: dataSave}] = useMutation(saveValueQuery);在记录中保存一些值

我的saveValue突变需要记录 ID。如果我在新记录上打开我的表单，我还没有这个 ID，所以在提交时我需要先调用createRecord以检索 ID，然后saveValue将值保存在我的记录中。

这种简单的方法不起作用：

但我真的不知道我应该如何处理第一个突变的loadinganddata并等待它运行第二个突变。

谢谢！

data即使它出现在下面的 html 中，为什么在 Promise 中未定义？

我不想用.then((data) =>

我正在使用 React 测试 Apollo Graphql，并尝试使用带有嵌套对象的 Apollo Graphql 更新本地状态。我遇到了一个问题。数据返回一个null值，甚至不返回我设置为默认值的值。我看到的唯一警告是Missing field __typename. 我不确定我遗漏了什么，或者这不是您使用 Graphql 或 Apollo 问题正确设置嵌套值的方式。我有一个代码沙箱，其中包含我正在尝试做的示例https://codesandbox.io/embed/throbbing-river-xwe2y

index.js

应用程序.js

名称.js

QUERIES.js

我正在尝试实现一个自定义钩子来为应用程序提供访客购物车。我的钩子环绕着useMutation来自 Apollo 的钩子，它将购物车 ID 保存在 cookie 中，同时还提供了“重置”购物车的功能（基本上，在下订单时删除 cookie）。

代码时间！（为简洁起见省略了一些代码）：

在我的组件中，我只是使用let [cartId, resetCart] = useGuestCart();.

当我运行单元测试（使用 Apollo 提供模拟突变）时，我看到钩子被调用了几次，输出看起来像这样：

我只是开始使用钩子，所以我仍然无法掌握它们的工作方式。为什么这么多的钩子调用？

谢谢您的回复！

我正在尝试使用 Apollo-client 来提取我的用户信息并遇到这个问题：

我有这个Container组件负责在呈现后提取用户的数据（而不是身份验证）。用户可能已登录或未登录，查询返回viewer = null或viewer = {...usersProps}。

Container 发出请求const { data, refetch } = useQuery<Viewer>(VIEWER);，成功接收响应并将其保存在data我用来读取的属性中.viewer并将其设置为我的当前用户。

然后用户可以注销，一旦他们这样做，我会清除Container' 的用户属性setUser(undefined)（未显示在下面的代码中，不重要）。

当我尝试重新登录时出现问题：调用refetch触发graphqlhttp 请求，但由于它返回与上次初始登录期间返回的相同数据 -useQuery()忽略它并且不更新data。好吧，从技术上讲，不可能有更新，数据是一样的。所以我的代码setUser(viewer);没有第二次执行，用户卡在登录页面上。

具有相同响应忽略的查询几乎是有意义的，所以我尝试了不同的方法，使用回调：

在这里，我完全希望 Apollo 调用onCompleted回调，无论是否使用相同的数据......但它没有这样做。所以我有点坚持这个 - 我如何让 Apollo 对我的查询做出反应，refetch以便我可以重新填充user我Container的状态？

那是我得到的例外……这对我来说没有意义……

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用程序请参阅 fb.me/react-invalid-hook-call 以获取有关如何调试和修复此问题的提示。

这是我的组件...我正在尝试仅存档标准登录/密码屏幕...

那么，怎么了？以及如何存档？