Relay.QL

必须使用Relay.QL标记的 ES6 模板代码来指定 Relay 片段, mutation 和查询,例如:

var fragment = Relay.QL`
  fragment on User {
    name
  }
`;

要执行这段程序代码,Relay 需要存取 schema - 它可能会太大而无法 打包 到应用程序里。作为替代,我们由 babel-relay-plugin 把这些 Relay.QL 模版青工 编译成 JavaScript 描述的代码。这份 schema 信息让 Relay 了解像字段参数的类型、哪一个字段是连接或是列表,还有如何有效地从服务重新获取记录等等。

相关 API #

Relay.QL 对象被以下API使用:

  • () => Relay.QL`fragment on ...`
    将 `Relay.Container` 的数据依赖关系指定为GraphQL片段。
  • (Component) => Relay.QL`query ...`
    指定 a `Relay.Route` 查询。
  • Relay.QL`mutation { fieldName }`
    在 a `Relay.Mutation` 中指定 mutation 字段。
  • var fragment = Relay.QL`fragment on ...`;
    在上述用例中组合可重用的片段。

片段组合 #

片段可以通过以下两种方式组合:

  • 在父片段中编写子组件片段。
  • 组合片段定义为局部变量。

Container.getFragment() #

容器指南中细介绍了组成子组件的,下面是一个简单的例子:

Relay.createContainer(Foo, {
  fragments: {
    bar: () => Relay.QL`
      fragment on Bar {
        ${ChildComponent.getFragment('childFragmentName')},
      }
    `,
  }
});

内联片段 #

片段还可以组成分配给局部变量的其他片段:

// An inline fragment - useful in small quantities, but best not to share
// between modules.
var userFragment = Relay.QL`
  fragment on User {
    name,
  }
`;
Relay.createContainer(Story, {
  fragments: {
    bar: () => Relay.QL`
      fragment on Story {
        author {
          # Fetch the same information about the story's author ...
          ${userFragment},
        },
        comments {
          edges {
            node {
              author {
                # ... and the authors of the comments.
                ${userFragment},
              },
            },
          },
        },
      }
    `,
  }
});

注意, 强烈 建议 Relay.Container 定义自己的片段,避免 var fragment = Relay.QL...在容器或文件之间共享内联值。 如果你发现自己想要共享内联片段,这可能是一个信号表示是时候重构并引入一个新的容器了。

条件字段 #

您可以根据布尔变量的值有条件地包含或跳过一个字段。

Relay.createContainer(Story, {
  initialVariables: {
    numCommentsToShow: 10,
    showComments: false,
  },
  fragments: {
    story: (variables) => Relay.QL`
      fragment on Story {
        comments(first: $numCommentsToShow) @include(if: $showComments) {
          edges {
            node {
              author { name },
              id,
              text,
            },
          },
        },
      }
    `,
  }
});

如果反面的语法可以让你感觉更好,那你可以使用 @skip(if: ...) 来取代 @include(if: ...)

数组字段#

为了将一个片段解析成一个对象数组,你必须使用 @relay(plural: true) 指令。

这将通知 Relay.QL 这个特定的字段是一个数组。这也将允许您为片段使用复数名称(即 bars 代替 bar)。

Relay.createContainer(Story, {
  fragments: {
    bars: () => Relay.QL`
      fragment on Bar @relay(plural: true) {
        id
        name
      }
    `,
  }
});

在 Relay 容器中, prop bars 会是一个数组而不是一个对象。