1

以下代码导致“未终止的字符串常量”错误，我不知道为什么。此代码来自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`
  ...
`

随着{}，错误消失（当然，数据也是如此）。

有谁知道这里发生了什么？

4

1 回答 1

3

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

要解决这个问题：

  • Relay.QL从函数返回模板文字。
  • 该queries物业现为fragments。
  • 片段声明语法已更改，Story现在fragment on Story.
  • 字段是驼峰式的，所以profile_picture会变成profilePicture.
  • （可选）删除逗号，因为它们被 GraphQL 视为空格。
  • 此外，确保您通过 babel-relay-plugin 处理您的源代码，它负责获取该模板文字并将其转换为带有 Relay 在运行时需要的数据注释的片段的表示；可以在relay-starter-kit中找到显示一种方法的示例。
module.exports = Relay.createContainer(Story, {
  queries: {
    story: () => Relay.QL`
      fragment on Story {
        author {
          name
          profilePicture {
            uri
          }
        }
        text
      }
    `,
  },
});

我认为我们应该返回并更新博客文章中的语法以避免潜在的混淆，但同时我认为您最好查看文档。

于 2015-10-21T18:24:32.467 回答