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

Question

以下代码会导致 "Unterminated string constant" 错误，我不确定原因。此代码来自 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

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

解决这个问题：

Return 来自函数的 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 in the blog post to avoid potential confusion, but in the meantime I think you're better off looking at the documentation。

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

Why does Relay.QL result in unterminated string constant error?

reactjs

relayjs