使用Relay和GraphQL进行查询

max*_*new 6 reactjs graphql relayjs

我正在学习React + Relay + GraphQL教程@ https://facebook.github.io/relay/docs/tutorial.html

我对于什么接口感到困惑:[nodeInterface]在GraphQL对象定义中做了什么.

net*_*six 7

简答

nodeInterface 当客户端(通常是浏览器)请求从初始提取已经拥有的一段GraphQL数据时,GraphQL仅使用GraphQL来重新获取.

在以下任何情况下都会执行重新获取:

  • 不同/相同的React组件(在同一网页上)在稍后阶段请求额外的数据,并且这些数据在获取的初始数据中不可用
  • React组件中的代码执行this.props.relay.forceFetch(),如果程序员认为服务器端的数据可能由于其他外部更改而通常会发生
  • this.props.relay.setVariable(...)当用户执行诸如改变要显示的项目数,图片大小等的动作时,React组件中的代码执行,这需要改变最初获取的数据.

在重新获取期间,GraphQL nodeInterface使用(全局)节点ID 调用,该节点ID nodeInterface需要检索与该节点ID关联的服务器端对象.使用该服务器端对象,GraphQL服务器可以返回客户端所需的附加/变体数据.

因此,如果永远不重新创建初始对象数据,则永远不需要节点ID.

有关详细信息,请参阅:https://medium.com/@khor/relay-graphql-de-mystifying-node-id-38757121b9c

细节

nodeInterface 执行节点ID到服务器端对象解析,因此它总是看起来像:

var {nodeInterface, nodeField} = nodeDefinitions(
  (globalId) => {
    var {type, id} = fromGlobalId(globalId);

    if (type === 'ClassA') {
      // Get ClassA type of instance with id
      // E.g.,
      return ClassA.find_by_id(id)
    } else if (type === 'ClassB') {
      return ClassB.find_by_id(id)
    }

    ...
  }
)
Run Code Online (Sandbox Code Playgroud)

由于需要重新获取的GraphQL类型需要Node ID,因此在GraphQL架构中需要:

  • 请求GraphQL在创建GraphQL类型实例时使用globalIdField关键字自动生成节点ID
  • 告诉GraphQL GraphQL类型如何解析在重新获取期间提供的节点ID到相应的服务器端对象,这是你的 interface : [nodeInterface]

从而:

var ClassAType = new GraphQLObjectType({
  name: 'ClassA',
  description: 'A',
  fields: () => ({
    id: globalIdField('ClassA'),

    ... other fields ...

  }),
  interfaces: [nodeInterface],
});
Run Code Online (Sandbox Code Playgroud)


小智 5

对于符合Relay标准的GraphQL服务器,具有全局ID的对象称为a Node,任何node可以通过查询重新获取

{
  node: (id: "some global id") {
    id,
    ... on SomeType {
      someField
    }
  }
} 
Run Code Online (Sandbox Code Playgroud)

Node interface用于GraphGL架构,可帮助您定义具有全局ID的Type.

检查全局对象标识及其规范详细信息