问题标签 [react-relay]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
500 浏览

react-relay - React Relay createFragmentContainer 和 QueryRenderer 数据流

我一直在研究 QueryRenderer https://relay.dev/docs/en/query-renderer和 FragmentContainer https://relay.dev/docs/en/fragment-container的中继文档中的示例

我对包装在 HOC createFragmentContainer 中的组件如何访问数据感到困惑。

我有一个顶级 QueryRenderer:

和一个 TodoList 组件,它定义了 graphql 片段中需要哪些数据:

和一个孩子 TodoListItem

我的理解是 TodoList 的 createFragmentContainer 将从 TodoList_tdlist 片段注入数据作为 TodoList props.tdlist),根据graphql查询的形状进行整形。

然而,这似乎并没有发生。我在控制台中收到警告:

Warning: createFragmentSpecResolver: Expected prop `tdlist` to be supplied to `Relay(TodoList)`, but got `undefined`. Pass an explicit `null` if this is intentional.

如果不传入 tdlist,createFragmentContainer 的工作是什么?

我试图通过将 return 更改为 return 来显式传递 todoList 数据(createFragmentContainer 传入的相同道具名称,我(可以理解)得到一个不同的错误:

我认为我困惑的根源是不了解定义数据依赖关系的片段如何与 QueryRenderer 交互。我是否需要定义查询以提取可能需要的每条可能的数据,关键是中继只会通过查看现在正在呈现的组件的 graphql 片段来查询所需的内容,并且会重新查询是否更改,在获取新数据时更新道具?

我是否需要将道具作为道具明确传递给片段容器,或者如果它们是请求其数据的 QueryRenderer 的后代,createFragmentContainer 是否能够通过中继环境访问它?

这是我的 graphql.schema 来提供帮助:

0 投票
1 回答
404 浏览

reactjs - 反应中继删除突变更新

删除行后我不知道如何更新表。Apollo-server 用于客户端的后端和中继。我正在尝试使用NODE_DELETE但我不知道我做错了什么

这是删除突变

deletedId 成功返回,但表中没有任何变化

表查询:

这是行片段:

0 投票
1 回答
77 浏览

relayjs - 中继片段参数可以与参数定义不同吗?

我有以下片段定义

我想在 GraphQL 查询中将参数从 to 更改user_iduser_ids(它只是一个包装 id 的数组),而不更改参数定义。

所以我想要类似的东西:

这甚至可能吗?在我的情况下,更改参数定义有点困难,因此尝试看看是否有一些简单的事情可以不走那条路线。

谢谢!

0 投票
0 回答
103 浏览

apollo-server - 如何在 React Relay 和 Apollo Server 中使用持久查询

我的公司目前在客户端使用 React Relay Modern,在我们的 GQL 服务器上使用 Apollo Sever。到目前为止,他们正在考虑添加一些优化以提高性能。我阅读该主题的其中一件事是持久查询的用户。React Relay 有一个简单的配置,用于为持久化查询生成 md5 散列以及包含原始查询的文件。但是,Apollo Server 有自己的解决方案,旨在与 Apollo Client 一起使用。我找不到任何将这两个概念结合在一起的方法。Apollo Server 在处理持久查询方面似乎非常严格,这使我的任务变得非常困难。

任何有任何想法或解决方案但不涉及更改底层技术的人将不胜感激。到目前为止,我唯一能想到的就是在 Apollo Server 前面安装 express JS 中间件,并尝试将哈希修改回所需的查询对象。

0 投票
1 回答
737 浏览

javascript - 提交突变后 QueryRenderer 不更新

我对中继和 GraphQL 非常陌生,并且希望模拟添加突变后的行为,我的组件会使用新的突变进行更新。例如,当我添加动物时,它会显示在我的动物列表中。

我已经阅读了一些关于通过乐观更新、获取容器等手动更新存储的内容,但是想知道这种行为是否可以通过仅使用 QueryRenderer HOC 和简单的突变来发生。

突变成功,但是我只能在刷新该页面后才能看到更新。

这是根查询渲染的代码:

这是Animal存在于组件中的PetList组件。该PetList组件是我希望重新渲染的组件,以包含一个新Animal组件以及使用突变创建的动物。

这是AddPetForm组件:

以及突变的代码(它存在于AddPetForm组件中):

和突变代码:

有什么明显的我做错了吗?如您所见,有一个嵌套的 QueryRenderer HOC,这是否会以某种方式破坏自动更新?

我没有使用订阅,因为我不需要实时事件监听。这些数据只会在用户添加新宠物时更新,而且这种情况不会经常发生。而且我没有使用乐观的更新/响应,因为在等待响应之前确实不需要向用户显示更新成功。

从文档看来,有一种方法可以使用 Refetch Container 来做到这一点,但是必须重构我的代码才能使用片段。

0 投票
1 回答
61 浏览

graphql - 使用反应中继时是否需要始终拉动 id 字段

我很好奇在id对中继图 QL 服务器进行查询时是否必须始终包含该字段?

例如:

我有时id在循环结果时使用该字段作为组件键,但一般来说我不使用它。中继是否在客户端的后台使用它来执行缓存?

我已经测试从我的查询中删除它并且没有注意到我的应用程序有什么不同。

0 投票
0 回答
398 浏览

reactjs - 当数据在缓存中可用时,停止中继现代 useLazyLoadQuery 在分页中重新获取?

我在现代继电器中有这个分页:

这是无限的分页:

但是我的问题出在每次渲染中,就像我回到屏幕时一样,它又被加载了?我怎么能阻止它发生,因为它是分页的,用户必须再次加载更多才能重新获得它的数据,我不希望这样?

0 投票
0 回答
316 浏览

react-native - 带有 react-native (expo) 的 babel-relay-plugin 抛出关于 'cypto' 的错误

我正在尝试使用 babel-plugin-relay 包在 expo 项目中实现 react-relay。它在 expo web ( npm run web) 上运行,但是当我在我的 android 设备 ( npm start) 上运行它时,发生了这个错误。

错误

我的配置

我正在使用 babel-plugin-relay/macro 来组成 graphql 片段(import graphql from "babel-plugin-relay/macro";)。

如果有人可以帮助我解决这个问题,我将不胜感激。谢谢。

0 投票
0 回答
124 浏览

typescript - 中继:接收错误时如何使用发出的类型 -> 类型 '"%future added value"' 不可分配给类型

这个问题的当前项目正在使用 react、react-relay 和 typescript。当尝试重用 Relay 为枚举发出的类型时,会发生错误:

Type '"%future added value"' is not assignable to type

我做了一些研究,发现这是一种向后兼容的保护措施,这似乎是合乎逻辑的。还有一种方法可以禁用所说的未来校对。我不想从这个项目中删除它,因为我当前的问题实际上是想要在单个页面中使用现有的发出类型作为枚举。有没有办法保持向后兼容性并仍然使用 Relay 的发出类型?

0 投票
1 回答
489 浏览

javascript - 如何在不复制片段的情况下传递道具

我的父组件以嵌套片段结束,如下所示:

如果我不包含所有这些子片段,但所有这些子片段的数据都相同,则中继失败,必须在需要登录用户的所有子组件上声明视图片段似乎很愚蠢。

如何在我的应用程序顶部请求这条数据并将其提供给子组件,而不必包含所有这些片段。

这开始感觉像是反向道具钻探,我必须在我的应用程序的下端声明一个片段并将其传递到链上。

与 allEmployees 相同。这是我应该只获取一次并通过上下文传递或访问的相同数据,但我必须传递所有这些愚蠢的片段或中继抱怨。