为什么 Relay.QL 会导致未终止的字符串常量错误？

Question

以下代码导致“未终止的字符串常量”错误，我不知道为什么。此代码来自 Facebook React 团队的 this blog post。

import React from 'react';
import Relay from 'react-relay';

// Story.react.js
class Story extends React.Component {
  render() {
    var story = this.props.story;
    return (
      <Story>
        <Image uri={story.author.profile_picture.uri} />
        <Text>{story.author.name}</Text>
        <Text>{story.text}</Text>
      </Story>
    );
  }
}

module.exports = Relay.createContainer(Story, {
  queries: {
    story: Relay.QL`
      Story {
        author {
          name,
          profile_picture {
            uri
          }
        },
        text
      }
    `
  }
});

如果我替换

Relay.QL`
  ...
`

使用{}，错误就会消失（当然，数据也会消失）。

有人知道这里发生了什么吗？

Answer 1

当我们最初编写这些示例时，我们简化了语法以避免用无关的细节分散人们的注意力，特别是因为我们知道其中一些语法会在开源发布之前发生变化。

解决这个问题：

• 从函数返回 Relay.QL 模板字面量。
• queries 属性现在是 fragments。
• 片段声明语法已更改，因此 Story 现在是 fragment on Story。
• 字段是驼峰式的，所以profile_picture 会变成profilePicture。
• （可选）删除逗号，因为它们被 GraphQL 视为空格。
• 此外，请确保您正在通过 babel-relay-plugin 处理源代码，它负责获取该模板文字并将其转换为带有 Relay 在运行时需要的数据注释的片段的表示;在the relay-starter-kit 中可以找到一个示例，展示了一种方法。

module.exports = Relay.createContainer(Story, {
  queries: {
    story: () => Relay.QL`
      fragment on Story {
        author {
          name
          profilePicture {
            uri
          }
        }
        text
      }
    `,
  },
});

我认为我们应该在博文中使用go back and update the syntax 以避免潜在的混淆，但同时我认为您最好查看the documentation。