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

下面的代码导致“Unterminated string constant”错误，我不确定原因。此代码来自Facebook React团队

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

  模板文本

• 查询

  属性现在是

  片段

• 片段声明语法已更改，因此

  故事

  现在是

  故事上的片段

• 字段是驼峰式的，因此

  profile\u picture

  将变成

  profilePicture

• （可选）删除逗号，因为它们被GraphQL视为空白
• 此外，确保您正在通过babel relay插件处理源代码，该插件负责获取模板文本并将其转换为片段的表示形式，该片段使用relay在运行时需要的数据进行注释；可以在中找到一个示例，其中显示了执行此操作的一种方法

---

我认为我们应该在博客中发表文章以避免潜在的混乱，但同时我认为你最好还是直接从源头上看一下。

。。。这太棒了，谢谢。实际上，作为练习，我试图将博客文章中的示例与relay starter工具包合并，但却完全被冲突的语法搞糊涂了。

Relay.QL`
  ...
`

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