Почему Relay.QL приводит к ошибке незавершенной строковой константы?

Следующий код приводит к ошибке «Незавершенная строковая константа», и я не уверен, почему. Этот код взят из это сообщение в блоге от команды 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`
  ...
`

с {} ошибка уходит (но, конечно, и данные).

Кто-нибудь знает, что здесь происходит?


reactjs relayjs
person Horace    schedule 21.10.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Когда мы изначально писали эти примеры, мы упростили синтаксис, чтобы не отвлекать людей посторонними деталями, особенно потому, что мы знали, что часть этого синтаксиса изменится перед выпуском с открытым исходным кодом.

Чтобы исправить это:

  • Возвращает литерал шаблона 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
      }
    `,
  },
});

Я думаю, нам следует вернуться и обновить синтаксис в сообщении блога, чтобы избежать путаницы, но пока я думаю, что вам лучше посмотреть документацию .

person wincent    schedule 21.10.2015
comment
Прямо из источника ... это потрясающе, спасибо. На самом деле я пытался объединить пример в сообщении в блоге с набором реле-стартера, просто в качестве упражнения, и был полностью сбит с толку конфликтующим синтаксисом. - person Horace; 23.10.2015