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

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

Я просмотрел типы, экспортированные пакетом "реакция-реле", но 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 вокруг Опоры, что в баре не указан заголовок, какой я хочу (я бы хотел, чтобы он жаловался на 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, чтобы он переносил ввод оформленного компонента. Я просмотрел внутренние типы реле и увидел https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211, но я чувствую, что это не способ добавить свойства Relay.

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

Ответы

Ответ 1

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

генерирование указанного файла путем запуска релейного компилятора

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

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

import type { MyComponent_myField } from "./__generated__/MyComponent_myField.graphql";
class MyComponent extends Component {
  props: {
    myField: MyComponent_myField,
  }

  render() {
    return <div>Example</div>;
  }
}
export default createFragmentContainer(MyComponent, {
  myField: graphql`
    fragment MyComponent_myField on MyType {
       edges {
          node {
            _id
            foo
          }
       }
    }
  `
});