问题标签 [relaymodern]
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.
reactjs - 如何让 QueryRenderer 传播父道具更改?
使用 Relay Modern v.1.4.1,考虑以下List
组件。
它需要两个 props foo
,并使用这些 props 和 GraphQL 查询的结果bar
渲染一个组件:Table
现在,对于Table
组件的初始渲染foo
并bar
正确设置,但是如果foo
或bar
之后发生更改,新值不会传播到Table
组件,因为QueryRenderer
.
由于只有在for更改时不会触发该方法的QueryRenderer
唯一重新渲染,因为没有看到需要它,因此组件保留旧的 prop 值。variables
SomeQuery
renderQuery
QueryRenderer
Table
由于将 props 传递给孩子是一项非常常见的任务,因此忽略父母 props 更改的事实QueryRenderer
造成了很大的问题。我一直想知道解决方案可能是什么,并提出了一些选择:
- 使用Context绕过此行为。然而,除非你有充分的理由,否则通常不鼓励使用 Context + 感觉就像是一种肮脏的黑客来规避这个问题。
- 强制
QueryRenderer
重新渲染与readyState
以前相同。这也许可以实现,refs
但您需要自己检查何时重新渲染。 - 不知何故
QueryRenderer
关心我的道具。QueryRenderer
这显然是正确的方法,但我在文档中没有找到任何允许这样做的东西,所以我需要做一些事情,比如从实现这种行为的它的或其子类创建一个高阶组件。
理想情况下,我希望有一种本地方式来QueryRenderer
查看道具更改,例如
或者
有任何想法吗?
graphql - 数据在 Graphql 中的存储位置
我开始使用带有反应中继的graphQl。我遵循了一些教程,我可以在突变和查询的帮助下获取和发布。一切正常,但我的问题是,
- qraphql 在哪里保存数据并为我们获取数据
例如:如果我从数据库中获取数据意味着我可以进入特定的 DB/TABLE。同样,我想知道 graphql 在哪里存储数据。
我搜索了很多网站,他们正在告诉如何使用 qraphql,但我无法找到我的问题的答案。我需要在这方面进行澄清。有人可以帮我解决这个问题。
javascript - 从 Relay Modern 的内部存储中获取数据的正确方法是什么?
我们目前正在探索 Relay Modern 中的一些未记录的 api,到目前为止,我们发现从 Relay Store 中获取数据以供应用程序使用的最佳方法是使用从 graphql 查询派生的选择器调用 environment.lookup。
发生这种情况是因为 RecordSource.get 方法似乎从存储中返回了对象,但没有为嵌套在它下面的节点获取任何数据。有没有更好的方法来获取对象和所有连接的节点?
我们的用例是我们正在使用 applyOptimisticUpdate 来更新 Relay 的存储,以便在保存到我们的管理应用程序之前所做的更改对所有请求该数据的组件都是可见的。因此,一旦我们完成了这些更改,我们希望重新查询中继存储以获取记录的当前状态,清理它以实现真正的突变,并将更新的有效负载发送到服务器。
任何见解都将不胜感激,我将向 Relay 添加文档以及调查结果(如果需要)。
reactjs - 找到路由器(用于 Relay Modern)受保护的身份验证路由
我正在尝试/login
根据 React Router 给出的示例创建一个受保护的路由,当用户未授权使用 Found Router for Relay Modern 时,该路由将重定向到:
我用真实的登录逻辑替换了 fakeAuth,但其余的都是一样的。路线只是不渲染。
Found Router 似乎对围绕这个特定问题的示例很了解。有任何想法吗?
relay - 中继模式 - 分页
我已经在研究分页了。
我为此使用了 PaginationContainer。它可以工作,但不是我想要的。我得到了下一个调用 props.relay.loadMore(2) 函数的按钮。因此,当我单击此按钮时,它将调用查询并添加我另外 2 个项目到列表。它的工作原理就像加载更多。但我不想将这两个新项目添加到列表中,而是用新项目替换旧项目。
我尝试使用这个 getFragmentVariables 来修改从商店读取的变量,但它不起作用。
以前有人想法或实施过类似的东西吗?
javascript - 使用 Relay 和 Graphql 在根节点上进行分页
努力获得这个设置并将我的头撞到墙上。我的 GraphQL DB 具有以下结构:
Graphql 架构
我有以下反应组件;注意 myindex.js
是我的根组件,然后ScopeList.js
是Scope.js
:
index.js
ScopeList.js
Scope.js
基本上我试图在根节点上设置分页scopes
但是,我的理解是我需要通过将它作为子节点添加到viewer
. 但是,我收到以下错误:
graphql - AddMutation 使用中继现代graphql
我正在尝试使用 relay 添加用户,下面是我的架构文件
schema.graphql
下面是我的变异文件,
AddUserMutation.js
但它给我这个错误
GraphQLParser:
data
类型上的未知字段UserPayload
。来源:文档AddUserMutation
文件:js/mutations/AddUserMutation.js
.
所以我在这里做错了什么,我搜索了许多网站仍然能够找到解决方案。有人可以帮助/澄清我吗?
reactjs - 带有 Babel 问题的 React/Relay Modern/GraphQL 简单项目设置
在执行 create-react-app 以启动和运行新的 react 之后,我按照 Relay 教程开始。我在 TypeScript 模式(从这里:https ://github.com/Microsoft/TypeScript-React-Starter )和普通的 JavaScript 模式下运行它,最初得到了相同的结果。
这是我尝试运行应用程序时遇到的错误:
要么未设置 Babel 转换,要么未能识别此调用站点。确保它被逐字用作
graphql
我怀疑 Babel 根本没有运行,但我不确定这是否完全正确。我遵循了这个:https ://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892看看这是否有助于让我的 babel 在我的新 create-react-app + 中继应用程序中执行没有运气。我什至从 create-react-app 中退出了该应用程序并修改了 webpack 以使其正常工作。以下是我认为的相关文件。我在这个主题上进行了大量搜索,但没有这样的运气,也找不到使用 React + Relay Modern + Graphql 的示例。
包.json
setup.js
App.tsx(或 App.jsx)
请让我知道是否有更多文件或信息会有所帮助。我真的很感激我能得到的任何方向。谢谢!
graphql - 在 Relay Modern 中设置多个网络层
我正在使用带有现代继电器的本机应用程序。
目前我们应用程序的 fetchQuery 实现,只是在网络上进行获取(如在https://facebook.github.io/relay/docs/en/network-layer.html中),
尽管有可能存在另一个本地网络层,例如https://github.com/relay-tools/relay-local-schema,它从本地数据库(如 sqlite/realm)返回数据。
有没有办法从本地网络层设置离线优先响应,然后自动请求真实网络,这也用更新鲜的数据填充存储(以及写入本地数据库)?他们还应该/可以共享同一家商店吗?
根据 Network.create() 的要求,它应该返回一个包含有效负载的承诺,似乎不可能返回多个值。
任何想法/帮助/建议表示赞赏。
reactjs - 在graphql中实现多个接口
我正在使用中继编译器,它不允许我编译具有实现多个接口的类型的模式。我做了一个小测试项目:
包.json
架构.graphqls
测试.js
如果你用 npm run relay 运行它(在 npm install 之后)你会得到错误:
任何想法为什么会发生这种情况?