问题标签 [react-apollo-hooks]

我最近才开始学习 GraphQL 和 React-Apollo，我想知道如果我需要在同一个组件中使用useQuery和钩子的推荐方法是什么。useMutation由于两个钩子都返回{data, loading, error}对象，因此名称是冲突的。我应该在解构时为属性分配唯一名称还是将逻辑移动到单独的容器组件更好？

我有一个 Modal 组件，它使用和使用可重用<Modal>组件：useQueryuseMutation

我的问题是我不完全确定我的测试方向。我想测试加载状态并很可能测试 . 的数据mocks，但是谷歌搜索和我对测试的一般知识的缺乏让我有点困惑。到目前为止，这是我的测试：

__CCPAModal.test.js

哪个会记录

我不确定从哪里开始。我希望能够测试加载状态和加载后的内容，但似乎我什至无法通过<Connect(t) size="md" id="CCPA Modal" />。

否则，我的替代解决方案是只进行快照测试。

谁能建议如何使用 Enzyme / useQuery / useMutation hooks 进行测试？加载后如何访问子组件？就此而言，我甚至不确定如何测试加载状态和数据。

我有一个屏幕，可以从 Hasura 获取一些数据。我正在使用这样的东西：

在screen1.js我有一个导航到的按钮screen2.js。在screen2.js我有一些突变会改变screen1.js. 当我更改此数据并执行突变时，我导航回screen1.js. 我希望相应screen1.js地更新数据。

我已经尝试了几种这样的解决方案（如文档中所建议的那样）：

但这不起作用。我无法让我的查询成为订阅，因为我的查询调用了 Hasura 的自定义操作，我相信它们只支持查询和突变。

我认为一个解决方案是在我导航到那里时重新渲染screen1.js，但我不知道这是否是最佳解决方案。

使用 Apollo 客户端，我看到了如何根据此处所示的道具跳过查询https://ladwhocodes.com/graphql/skip-a-graphql-query-based-on-conditions/31/

但是，如果我想跳过根据状态变化调用我的查询怎么办。

我有一个查询设置为每 5 秒轮询一次，但我想在对话打开时暂停此轮询（以避免重新渲染对话的父组件，导致对话重新渲染，然后必须将光标聚焦在它所在的位置前）。

我试过这个，但它不起作用。我想要的行为可能吗？

PS：还尝试将对话打开/关闭状态移动到父组件，但这也不起作用。

我目前正在从事一个需要我进行多个查询/突变的项目。我尝试使用 BatchHttpLink 设置我的 apollo 客户端，我可以在浏览器的网络选项卡中看到我请求的数据。它返回的是对象数组而不是 JSON。

但问题是当我尝试获取组件数据中的数据时未定义。我尝试使用 HttpLink 而不是 BatchHttpLink，我可以从钩子中取回数据。

我怀疑从响应中返回的对象的形状不同，我尝试查看文档，但找不到太多关于批处理的信息。

目前使用"@apollo/client@^3.0.2"

这是我的客户端设置。

这是我试图控制日志的反应钩子。

假设我有这样的模式（伪代码）

我正在获取这样的评论（伪代码）

在我的组件中（伪）：

我的问题是这个。如果我已经加载了 , 和 字段的提要comments，id然后text我随后加载了带有添加author字段的单个评论，有没有办法让useQuery单个评论查询获取具有相应 id 的缓存对象查询comments，如果可用？也就是说，comments查询应该text已经有一个评论的字段，该评论的 id 已经加载。只需要额外的网络请求来获取author字段。如果 Apollo 足够聪明，可以立即返回这个部分结果，然后author在我的示例中，当数据可用时返回其余字段，那就太好了。

使用 apollo 包/缓存可以做到这一点，还是我需要编写自己的useQuery包装器来直接读取缓存？

我正在使用 graphQL 和作为数据库我使用 PostgreSQL。

所以我的主屏幕上有一个记录列表，当我的数据库上有新记录时我想更改它。我的数据库可以从不同的 UI 更新。那么每当我的数据库记录发生变化时，在不重新加载的情况下更新我的 FE 的最佳做法是什么。

作为一名加入者，我react-apollo-hooks用于获取 graphQL 数据。

我尝试了什么：

• 网络套接字

参考链接：

• https://scotch.io/tutorials/realtime-graphql-ui-updates-in-react-with-apollo
• https://www.smashingmagazine.com/2018/12/real-time-app-graphql-subscriptions-postgres/

还有其他更好的方法可以从 BE 获取最新数据吗？

编辑：我知道有很多方法可以实现这一点，但我想知道最好的方法。就像按照行业标准的方式。

我有一个items/[id]用于创建和编辑项目的页面。我使用 -1 作为新项目的项目 ID 以区分创建和编辑模式。它是一个功能组件，如下所示

表单提交根据 id 值调用创建或更新突变。在onCompleted创建突变的处理程序中，我添加了一个路由器调用来更新 id，如下所示：

当此路由发生时，我在useQuery.

我使用 react-apollo useLazyQuery 钩子。我的目标是使用它来获取更多按钮点击。但是，当我尝试使用它时，fetchMore 函数是未定义的。

这里调用它：

即使我在组件就绪时运行惰性，fetchMoreStill 仍然未定义。

问题是为什么它是未定义的？

“阿波罗客户端”：“^2.6.4”，“反应阿波罗”：“^3.1.3”，

我在 React 本机 android 应用程序中使用 useQuery 挂钩来获取数据。当我的应用程序启动时，我得到初始行作为从原生端到 React Native 的道具。然后 React 原生层使用 useQuery 获取下一页。

截至目前，我正在使用 fetchMore 函数将初始数据与新数据合并，但池化间隔并未更新初始数据。

如何将 useQery 与初始数据https://react-query.tanstack.com/docs/guides/initial-query-data以及池化间隔一起使用。

谢谢