标签: relayjs

GraphQL由类型系统,查询语言和执行语义,静态验证和类型内省组成,每个都在下面概述.为了指导您完成这些组件,我们编写了一个示例来说明GraphQL的各个部分.

- https://github.com/facebook/graphql

Falcor允许您通过虚拟JSON图表将所有远程数据源表示为单个域模型.无论数据位于何处,无论是在客户端的内存中还是通过服务器上的网络,您都可以采用相同的方式编码.

- http://netflix.github.io/falcor/

Falcor和GraphQL有什么区别(在Relay的背景下)？

我开始使用它,relay-starter-kit并通过Relay和GraphQL文档工作.但是有很多领域是无法解释和神秘的.

说真的,我到处都阅读了很多关于所有这些事情的文件,但对以下问题找不到任何令人满意的解释:

这个是来做什么的？我把日志记录但它甚至根本没有被调用:

var {nodeInterface, nodeField} = nodeDefinitions(
  (globalId) => {
    var {type, id} = fromGlobalId(globalId);
    if (type === 'User') {
      return getUser(id);
    } else if (type === 'Widget') {
      return getWidget(id);
    } else {
      return null;
    }
  },
  (obj) => {
    if (obj instanceof User) {
      return userType;
    } else if (obj instanceof Widget) {
      return widgetType;
    } else {
      return null;
    }
  }
);

这个的实际效果是什么:

interfaces: [nodeInterface],

也许与此相关,node这里的领域是做什么的:

var queryType = new GraphQLObjectType({
  name: …

在Relay GraphQL中,连接和列表都是类似数组的,但它们具有不同的功能.我什么时候应该使用？

我正在尝试键入(使用flowtype)我正在增强的组件Relay.createContainer.

我查看了"react-relay"包导出的类型,但ReactContainer似乎没有带来Props.

我尝试了RelayContainer,ReactClass,React$Component等,到底是最接近预期的结果,我可以得到的是:

// Foo.js
// @flow
import React from "react";
import Relay from "react-relay";

type Props = { title: string; }
const Foo({ title }: Props) => (<div>{title}</div>);

const exported: Class<React$Component<void, Props, void>> = Relay.createContainer(Foo, {
  fragments: { ... }
});

export default exported;

-

// Bar.js
// @flow

import React from "react";
import Foo from "./Foo.js";
const Bar = () => <Foo />; 

现在流量会在 …

我已经阅读了基于redux和relay的文章/文档的数量,但我仍然很困惑这两个库是如何不同的？
这两个库有哪些优点和缺点？
GraphQL在中继中的确切作用是什么？
哪个库更适合CRM/ERP等企业数据驱动应用？

viewerGraphQL 中根查询字段的用途是什么？

根据这篇文章,viewer可以用来接受一个令牌参数,这样我们就可以看到当前登录的是谁.

我该如何实施呢？

该继电器的文档包含此片段:

query RebelsRefetchQuery {
  node(id: "RmFjdGlvbjox") {
    id
    ... on Faction {
      name
    }
  }
}

这... on Faction对语法有何意义？

我正在研究基于反应/中继的内容管理系统.用户可以创建和修改存储在服务器上的文章.在将文章保存到服务器之前,我想知道最好的方法是处理文章的修改状态.我可以想到几种不同的方法来解决这个问题:

1)不受控制的输入

我可以使用填充输入元素,defaultValue而不是显式地存储状态.DOM将用作修改数据的商店.一旦用户点击"保存",我收集所有字段,读取值并创建变异.

优点:

• 没有当地的国家处理

魂斗罗:

• 我不知道哪些字段已更改,需要通过突变发送所有数据.或者需要一些额外的逻辑来创建差异
• 无法更新视图的其他部分以响应状态更改

2)在本地复制:

我可以将修改后的文章保留在react组件的本地状态,并使用受控输入字段来保持同步.

优点:

• 本地州只能改变字段,因此差异很容易
• UI的其他部分可以响应本地状态的变化

魂斗罗:

• 这似乎是一种反模式,因为视图中的数据不是直接来自中继.本地状态和中继道具之间的同步可能是错误的来源

3)服务器是新的本地:

只需为每个单独的更改创建一个变异.使用乐观更新,这也应该提供良好的用户体验.

优点:

• 中继是数据真实的唯一来源
• 状态是在服务器端保存的,因此如果用户意外关闭浏览器,则会有备份

魂斗罗:

• 这需要在服务器端实现更复杂的实现,以处理用户想要丢弃草稿等的情况.
• 引发了许多突变

这三种方法可以解决我想到的问题,但也许有更好的方法可以解决这个问题.

我已经看到有很多关于如何使用Relay处理本地状态的讨论,并且可能会有一个内置的解决方案,其中包含Relay的未来版本,但是我需要一个适用于当前版本的解决方案的解决方案中继.

我必须从头开始一个新的(web + native)项目(中型应用程序).由于过去几年里有过多的JS框架和实现,我对我平常的堆栈有了第二个疑问.

我一直在前端使用react + redux,后端使用Node和MongoDB通过REST API进行通信.

对于这个新项目,我决定使用React-Native + React Native for Web + Node + PostgreSQL.但是,我想知道我应该使用哪个框架来进行数据获取和状态/存储管理.

到目前为止,redux很适合我.但是,由于JS演变的本质.我对我过去使用过的堆栈持怀疑态度.

如果我使用下面的堆栈,有什么优缺点

React-Native + React-Native-For-Web + Redux + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Relay + GraphQL + Node + PostgreSQL


React-Native + React-Native-For-Web + Apollo + GraphQL + Node + PostgreSQL

我已经阅读了许多文章,说明使用每个框架的好处,但内容和文章的数量有点可怕.我明白没有正确或错误的答案.但是,很高兴知道上面提到的堆栈很好地记在一起 - 更少的学习曲线,良好的文档,可维护性,更少的变通方法.

这些天我正在尝试使用React + Relay + Graphql.不幸的是,我找不到任何简单方便的方法来测试Relay Container包装的React组件.

基本上,我想沿着TDD实现这些目标,

1. 渲染容器并测试其内容,
2. 更改变量并测试其对内容的更改.

与React + Flux相比,React + Relay更像是黑盒子,或者说是声明式的.

我可以看到人们模拟Relay.createContainer来绕过Relay并仅仅测试React Component.它使继电器部分不被覆盖,并且无法通过测试来驱动该部件. https://github.com/facebook/relay/issues/161

另外,我阅读了Relay的测试用例,并且渲染一个模拟容器真的很乏味. https://github.com/facebook/relay/blob/master/src/tools/ mocks /RelayTestUtils.js

如果您能与我分享解决方案,我将非常感激.

谢谢!