Как ввести экспортированный RelayContainer

Я пытаюсь ввести (с помощью flowtype) компоненты, которые я улучшаю с помощью Relay.createContainer.

Я изучил типы, экспортированные с помощью "react- relay ", но ReactContainer не кажется Перенести реквизит.

Я экспериментировал с RelayContainer, ReactClass, React$Component и т. Д., В конце концов, наиболее близким к ожидаемому результату, который я мог получить, является:

// Foo.js
// @flow
import React from "react";
import Relay from "react-relay";

type Props = { title: string; }
const Foo({ title }: Props) => (<div>{title}</div>);

const exported: Class<React$Component<void, Props, void>> = Relay.createContainer(Foo, {
  fragments: { ... }
});

export default exported;

--

// Bar.js
// @flow

import React from "react";
import Foo from "./Foo.js";
const Bar = () => <Foo />;

Теперь поток будет жаловаться в Foo.js вокруг Props, что Bar не предоставляет опору заголовка, что вроде того, что я хочу (я бы хотел, чтобы он пожаловался в Bar.js, но это деталь). Однако, если бы Bar также RelayContainer ссылался на поток фрагментов Foo, он бы пожаловался, что не может найти getFragment в свойствах Foo:

// Bar.js
// @flow

import React from "react";
import Relay from "react-relay";
import Foo from "./Foo.js";

const Bar = () => <Foo />; 

export default Relay.createContainer(Bar, {
  fragments: {
    baz: () => Relay.QL`
      fragment on Baz {
        ${Foo.getFragment("foo")}
      }
    `
  }
}

В конце концов, я пытаюсь ввести вывод Relay.createContainer, чтобы он передавал набор декорированного компонента. Я изучил внутренние типы Relay и увидел https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211, но мне кажется, что это не способ добавлять в свойства Relay.

Есть идеи, как я могу этого добиться?


reactjs javascript flowtype relayjs
person chollier    schedule 06.09.2016    source источник
comment
связанные github.com/facebook/relay/pull/1155   -  person gre    schedule 22.11.2016
comment
Приведенный выше план кажется многообещающим. Я собираюсь посмотреть, смогу ли я расширить его, чтобы сообщить Flow, что компонент более высокого порядка добавляет статический метод getFragment. Если кто-то придумал лучшую альтернативу, было бы неплохо узнать!   -  person John    schedule 15.03.2017
comment
Ли Байрон объявил вчера на react-europe, что Relay 1.0.0 будет генерировать __generated __ / * файлы для каждого фрагмента и что они будут экспортировать flowtypes. так что я думаю, это решит эту проблему?   -  person gre    schedule 20.05.2017

Ответы (1)


arrow_upward
4
arrow_downward

как указал @gre, теперь компилятор Relay генерирует типы потока для фрагмента, и они экспортируются в сгенерированные файлы в подкаталоге __generated__.

создание указанного файла путем запуска Relay Compiler

relay-compiler --src ./src --schema ./schema.json

Затем вы должны импортировать типы потоков для свойств поля следующим образом:

import type { MyComponent_myField } from "./__generated__/MyComponent_myField.graphql";
class MyComponent extends Component<{
  myField: MyComponent_myField,
}> {
  render() {
    return <div>Example</div>;
  }
}
export default createFragmentContainer(MyComponent, {
  myField: graphql`
    fragment MyComponent_myField on MyType {
       edges {
          node {
            _id
            foo
          }
       }
    }
  `
});

Хотя в настоящее время типы AFAIK для распространенных фрагментов не создаются , если вы не используете систему модулей Haste < / а>

person Alfonso Pérez    schedule 02.06.2017