reactjs - 使用 Relay 和 GraphQL 进行查询

Question

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

我对接口(interface):[nodeInterface] 在 GraphQL 对象定义中的作用感到困惑。

Answer 1

简短回答

nodeInterface 仅在客户端(通常是浏览器)请求重新获取初始获取时已拥有的 GraphQL 数据时，GraphQL 使用。

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

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

在重新获取期间，GraphQL 使用(全局)节点 ID 调用 nodeInterface，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)
    }

    ...
  }
)

由于需要重新获取的 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],
});