问题标签 [react-relay]

我想在我的项目中使用带有中继的反应导航。

我做的是：

导航器有我的应用程序的屏幕。

在 MyApp （这是中继容器）中说我query viewer{}

如果我的屏幕也是中继容器，我应该viewer从 MyApp 传递到 Navigator，然后再传递到我的屏幕，（我不知道如何将道具传递给导航器）。

如果我的屏幕是 React 组件，但我在其中渲染中继容器，我应该将这些容器传递给viewer 我在 react 组件中没有的道具：\

提前致谢。

我正在尝试为我的应用程序创建一个故事书react-realy，但我不知道如何为该组件设置模型数据。对于简单的组件是可以的，因为我可以使用虚拟 UI 组件与容器的方法，但我不能将它用于嵌套的中继组件，例如有一个UserList组件，我想添加到故事书中，我可以拆分中继片段部分到容器，UI 部分到组件，但是如果UserList子组件太中继组件怎么办？当它们是组合的一部分时，我不能拆分它们UserList？

是否有一些解决方案可以将继电器组件添加到故事书中？

我react-relay在尝试实例化扩展类时遇到了一个非常奇怪的 TypeError Relay.Mutation。我创建了一个简单的 Typescript 项目create-react-app my-app --scripts-version=react-scripts-ts来演示这个问题。

每当我跑步yarn start时，这就是我所看到的：

这个错误对我来说真的没有意义： TypeError: Object prototype may only be an Object or null: undefined

我只是想实例化我自己的扩展Relay.Mutation类的一个新实例。总的来说，我对 React Relay 世界和 ES6/Typescript 真的很陌生，所以我可能只是想念一些愚蠢的东西。

在这个简单的项目中，我直接使用了DefineTyped repository中定义的示例类。

我不应该像这样使用这个类吗：

下面是这个 AddTweetMutation.tsx类的样子：

这是整个Hello.tsxReact 组件：

这就是我的package.json样子：

这是github的项目

更新：输入当前对 react-relay > 1.x 无效。有关此问题，请参阅github 上的线程。我还使用解决方法更新了我的存储库。

我想要实现的流程是

1. 用户单击“创建 X”按钮
2. 使用中继突变创建空白 X
3. 打开模态框以编辑 X

我有一个服务器端突变，它返回 x （类型X）、它的父级以及它们之间的边缘，所以我可以做一个RANGE_ADD客户端并更新商店。

showModal是一个 redux 动作，它从第一个参数创建一个组件，并从第二个参数为其提供道具。

EditXModal是一个中继容器，

我得到的具体错误是

当您忘记正确组合 Fragments 时，通常会出现该错误，因此在 中CreateBlankXMutation，我尝试添加EditXModal.getFragment(...)和配置（两次都在 下getFatQuery）- 没有骰子，同样的错误。REQUIRED_CHILDRENx

如果我“检查”对象（console.log），我可以看到片段在突变后被正确填充 -x看起来像{ id: "...", ..., _someField: ... }，但是一旦加载模式，片段就会正确解析（x看起来相同 -_...仍然具有片段属性）。

I am following the tutorial from lynda: "Building and Deploying a Full-Stack React Application", in the chapter "Injecting the Relay Network Layer". there is in index.js, an attempt to set up a network layer, and the program compiles successfully but I'm receiving the following error in the browser:

TypeError: __WEBPACK_IMPORTED_MODULE_4_react_relay___default.a.injectNetworkLayer is not a function

index.js file is:

我有以下简单的 Relay Modern 代码：

我正在尝试在运行之前对代码进行中继编译，但出现以下错误：

我无法找出为什么我的变量companyId不在范围内，因为它是在文档中所述的variables部分中定义的。QueryRenderer

如果我为 id (example) 使用固定值，node id: "Company:59b2cda12504b914cc398100"代码将被中继编译，我可以正常获取我的数据。当我需要动态选择 id 时，就会出现问题。

在 Relay Modern refetchContainer 与refetchOptions: { force: true }和给出相同的结果refetchOptions: { force: false }。

我有一个重新获取容器，如下所示：

在输入标签的 onChange 方法中，我有以下代码：

当我输入新字符以及删除字符时，中继会进行网络查询。理想情况下，当字符被删除时，它应该使用之前查询的相同数据。

我试图对突变进行更新，但它运行不正常，它告诉我“setValue 不是函数”，当在 newEvent 和 relayEvent 上执行 console.log 时，它会向我返回正确的数据请帮帮我！

我的突变在工作，但不知何故数据没有被更新，所以我需要做一个不工作的更新程序

这是我的代码：

我似乎无法让“计数”数据显示在 UI 中。我确定我错过了在同一个容器中使用两个片段或渲染边缘数组或异步的东西，也许。所有其他数据都显示除了{this.props.link.votes.count}在 UI 中显示为空的数据，同时在开发工具中的服务器或客户端上没有抛出任何错误。它只是没有出现。任何帮助将不胜感激。谢谢你。

反应组件看起来像：

我有这个工作的 graphql 查询，它可以在 graphiql 中提取正确的数据。

这是输出

在我的 Link.js 组件中，我有这些重复上述 graphql 调用的片段

完整的 Link.js 文件在这个要点中中。

因此，考虑到“链接”节点的结构，这个想法应该可行：

'link' 为您提供您在 graphql 响应中的链接。'votes' 为您提供 votes 键，该键具有一组边，该数组始终只返回数组中包含投票计数结果的一个对象。因此，您希望该数组中的索引为 0

如果我们想要索引 0 上的节点属性，我们使用点表示法，然后对象上的 count 属性键也是如此。这是行不通的。

我坚持传递从突变返回的数据来处理 Reactjs 中的表单验证。此模式不仅限于表单验证，还适用于其他具有相似要求的组件，其中某些内容发生了变异/查询，并且响应数据仅用于更新 UI。

概念：

<LoginForm/>组件呈现登录表单并提交loginMutation表单数据。验证发生在后端，如果验证捕获到任何错误，突变将使用errors包含键值对的字段来解决，其中键代表表单字段，值描述值的问题。这个想法是将errors对象传递给 ，<LoginForm/>以便组件可以渲染/更新以在 UI 中显示错误。

挑战：

应该以什么方式将解析的数据（errors）传递给<LoginForm/>？最直接的锤钉方法是将回调函数传递给loginMutationfrom并在响应对象<LoginForm/>中调用它。onComplete()像这样的东西：

然后在<LoginForm/>里面会有

最后我们可以<LoginForm/>像这样相应地更新 UI

我正在寻找一种不太重要的方法来减少意大利面。

此外，我期待已宣布的架构扩展功能，该功能目前缺少文档。似乎它的目的是通过允许我们将本地状态（例如 UI 状态）与从查询/突变中获取的持久数据混合来解决这个问题。