我正在尝试设置一个基本的React Native Relay项目.我花了很多时间尝试调试问题而没有任何运气,我正在创建这个问题.我在控制台上收到此警告,我的本机应用程序无法调用GraphQL服务器.
Warning: RelayNetworkLayer: Call received to injectImplementation(), but a layer was already injected.
Running application "ExampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
fetchWithRetries(): Still no successful response after 1 retries, giving up.
这是我的代码
index.ios.js
import React, { Component } from 'react';
import Relay from 'react-relay';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import App from './app';
import AppRoute from './route/appRoute';
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer("http://localhost:1337/graphy")
);
class ExampleApp extends Component …我的Relay/GraphQL片段包含两个不同的查询,这两个查询都返回相同类型的对象,并且两者之间返回的结果集之间经常存在一些重叠(这对我来说完全没问题).我在浏览器中看到以下警告:
Attempted to add an ID already in GraphQLSegment: client:client:15254944391:UmV2aWV3ZXI6MQ==
cra.dll.js:106483 Attempted to add noncontiguous index to GraphQLSegment: 52 to (0, 2)
cra.dll.js:106483 Attempted to add noncontiguous index to GraphQLSegment: 53 to (0, 2)
cra.dll.js:106483 Attempted to add noncontiguous index to GraphQLSegment: 54 to (0, 2)
cra.dll.js:106483 Attempted to add noncontiguous index to GraphQLSegment: 55 to (0, 2)
有人可以确认这确实是由于我两次看到相同的Relay对象吗？如何使警告静音或至少进一步调试？
我正在使用基于令牌的身份验证,并想知道如何在Relay Modern中将它完全绑定在一起.我已经过了一半.任何帮助深表感谢.这是我的设置:
<App />我渲染<QueryRenderer />入口点.<LoginPage />组件内部,我有一个表单,在提交时触发LoginUserMutation.当我提供有效的用户名和密码组合时,我会收到一个令牌:
localStorage.setItem('token', token)/dashboard路由history.push('/dashboard')createRelayEnvironment.js的fetchQuery我定义了如何向GraphQL后端发出网络请求:
const token = localStorage.getItem('token');{ ..., 'authorization': 'Bearer ${token}' }.然后后端能够验证用户.Soooo goood到目前为止.不幸的是,有一个问题正在破坏图片.当令牌已经存储到localStorage后应用程序初始化时,此设置很有效.但不是这样,如果您当前未在localStorage中没有令牌条目的情况下进行身份验证.
如前所述,假设您在LoginUserMutation中,突变已成功,并且您在onComplete回调中获得了有效的令牌.现在该怎么办？是的我把它存放在里面localStorage.但是如果我将用户重定向到<Dashboard />组件,我就搞砸了.为什么？ - 仪表板组件需要受限数据.当应用程序首次初始化时,虽然未提供受限数据,因为没有令牌被发送到GraphQL端点.然后,当令牌最终在LoginUserMutation中可用时,Relay实际上并没有对它做任何事情.
TL;博士
Q1
我如何 - 配备有效令牌 - <Dashboard />在我发送用户之前触发重新获取组件所需的数据/dashboard.
Q2
使用JSON Web令牌(JWT)时,是否有更好的方法来处理带Relay的身份验证？特别是,从在LoginUserMutation的onComplete回调中收到有效令牌的那一步做什么？
在很多情况下,我们有突变,其中存在我们需要变异的一对多或多对多关联,以及将关联作为分页列表暴露给查询的位置.
有一些关键要求:
不太重要:
这个问题有很多可能的解决方案:
输入类型具有单个数组输入字段,表示关联的总真实性(添加新元素,更新现有元素,删除缺少的元素,并在必要时保留顺序).
缺点:删除非常隐含.客户端必须通过关联的整个当前状态进行分页.不精细.
输入类型具有单个数组输入字段,用于更新现有元素并添加新元素(忽略缺少的元素).可以在元素上指定位置或索引值以对其重新排序.单独的突变用于删除元素.
缺点:删除在变异中自行关闭是不一致的,而所有其他操作都在父节点上.不太精细.
输入类型具有单个数组输入字段,用于更新现有元素并添加新元素(忽略缺少的元素).单独的突变用于删除和重新排序元素.
缺点:客户端无法将新元素添加到关联中的特定位置,必须添加它们,然后单独重新排序.不太精细.
与选项3类似,但输入字段仅用于更新; 单独的变异用于添加新元素.
缺点:客户必须进行多次突变才能执行复杂的更新.客户端无法使用初始关联创建父级.
父输入类型没有相关字段,所有内容都通过四个单独的突变完成,用于添加/删除/更新/重新排序.
优点:非常明确和精细,将不同的数据模型对象分开.缺点:客户必须进行多次突变才能执行复杂的更新.客户端无法使用初始关联创建父级.
输入类型有两个数组字段:一个用于更新,添加和重新排序元素(请参阅选项2),另一个用于删除.
缺点:感觉就像我们污染了父母的突变; 不精细.
与选项6类似,除了使用单独的重新排序变异而不是位置参数.
缺点:重新排序自行关闭不一致.另见选项6的缺点.
所有这些选择似乎都有缺点.选项5似乎是最明确的,但要求用户同时使用多个突变,其中操作不再是原子的.
Facebook处理这些类型突变的方式是什么？你的方式是什么？谢谢!
{这是Relay Modern}
在我的UserQuery.js中,
class UserQuery extends Component {
render () {
return (
<QueryRenderer
environment={environment}
query={GetAllUsers}
render={({err, props}) => {
if(props){
return <UserList />
}
return <Text>Loading...</Text>
}
}/>
)
}
}
export default UserQuery;
所以这是调用QueryRenderer的UserQuery的根.现在是userList组件..
class UserList extends Component {
render () {
const users = this.props.users
return (
<View>
{this.renderUsers(users)}
</View>
)
}
renderUsers(users) {
if(!users) {
return <Text>No Users</Text>
}
return users.edges.map(user=>{
return <UserItem user={user}/>
})
}
}
module.exports = createFragmentContainer(
UserList,
graphql`
fragment userList_users on userEdges …我正在研究Twitter源代码,我遇到了以下片段:
window.setTimeout=window.setTimeout;window.setInterval=window.setInterval;
为什么Twitter重新定义了这些功能？
编辑:要查看代码,请转到任何Twitter用户页面,打开页面源,您将在第二个javascript块中看到该片段.
我正在学习React + Relay + GraphQL教程@ https://facebook.github.io/relay/docs/tutorial.html
我对于什么接口感到困惑:[nodeInterface]在GraphQL对象定义中做了什么.
我有一个基本上是一个表单的UI,但它有不同的组件来编辑特定的数据.当用户单击"保存"按钮时,我希望同时保存页面上的所有数据.所有数据都包含在一个类型中,并且我有该类型的更新变异.因此,虽然不同的子组件可能正在编辑将要保存的对象的不同部分,但是父组件将负责执行保存所有数据的单个更新突变.
我遇到的问题是我不知道我应该在哪里有子组件的状态.无论如何,似乎它们的状态必须在父级中,以便它具有它并且可以将它包含在输入对象中,它在执行时传递给变异.然而,这些让我处于两个地方之一,这似乎都不理想:
警告:RelayContainer:
details提供的预期道具[object Object]是Relay提取的数据.除非您故意传递符合此组件片段形状的模拟数据,否则这可能是错误.
希望有一种明显的首选方式来处理这种情况,但是从我的搜索和玩Relay我无法确定它.
我有一个使用GraphQL中继连接的页面drafts.
query {
connections {
drafts(first: 10) {
edges {
node {
... on Draft {
id
}
}
}
}
}
}
在这个页面中,我还创建了草稿CreateDraftMutation.
mutation {
createDraft(input: {
clientMutationId: "1"
content: "content"
}) {
draft {
id
content
}
}
}
在此突变之后,我希望Relay将创建的草稿添加到其商店中.变异配置的最佳候选者是RANGE_ADD,其记录如下:
https://facebook.github.io/relay/docs/guides-mutations.html
RANGE_ADD给定父级,连接以及响应有效负载中新创建的边的名称中继将根据指定的范围行为将节点添加到存储并将其附加到连接.
参数
parentName:string响应中表示连接父级的字段名称
parentID:string包含连接的父节点的DataID
connectionName:string响应中表示连接的字段名称
edgeName:string响应中表示新创建的边的字段名称
rangeBehaviors:{[call:string]:GraphQLMutatorConstants.RANGE_OPERATIONS}
按字母顺序打印的以点分隔的GraphQL调用之间的映射,以及在这些调用的影响下将新边添加到连接时我们希望Relay显示的行为.行为可以是"追加","忽略","前置","重新获取"或"删除"之一.
文档中的示例如下:
class IntroduceShipMutation extends Relay.Mutation {
// This mutation declares a dependency on the faction
// into which this ship is to be introduced.
static …我希望从Relay存储中保留一些数据部分,并在以后的会话中再次加载它以获得更好的用户体验.(我正在使用Relay with react native for context).
数据可以相对较大(最多几千条记录),并且不需要与服务器同步100%.我希望跨会话保留记录,因为我不希望每次用户打开应用程序时都重新获取数据.这将是服务器的负担和糟糕的用户体验(加载时间).
relayjs ×9
graphql ×6
reactjs ×5
react-native ×2
graphql-js ×1
javascript ×1
setinterval ×1
settimeout ×1
twitter ×1