Comment taper un RelayContainer exporté

Question

Je suis en train de taper (avec flowtype) les composants je suis amélioration avec Relay.createContainer.

J'ai regardé dans les types exportés par le "réagir relais colis mais ReactContainer ne semble pas transporter plus d'Accessoires.

J'ai testé avec RelayContainer, ReactClass, React$Componentetc, en fin de compte la chose la plus proche du résultat attendu j'ai pu obtenir est :

// 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 />; 

Maintenant, le flux va se plaindre en Foo.js autour des Accessoires qui le Bar ne pas offrir le titre accessoire, qui un peu ce que je veux (j'aimerais qu'il se plaindre Bar.js mais c'est un détail). Cependant si la Barre était aussi un RelayContainer référencement Foo fragment d'écoulement puisse se plaindre qu'il ne peut pas trouver getFragment Foo propriétés:

// 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")}
      }
    `
  }
}

En fin de compte je suis en train de taper la sortie de l' Relay.createContainer alors qu'il effectue au cours de la frappe de la décorées composant. J'ai regardé dans les Relais internes de types et vu https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211 mais j'ai l'impression que c'est pas la voie à suivre pour ajouter dans le Relais de propriétés.

Une idée de comment je pourrais faire ?

Answer 1

@gre a souligné, maintenant le Relais Compilateur génère des types de Flux pour le fragment et ceux-ci sont exportés dans des fichiers générés dans un __generated__ sous-répertoire.

génération de fichier en exécutant le Relais Compilateur

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

Vous pouvez ensuite importer le flux de types pour le domaine des accessoires comme:

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
          }
       }
    }
  `
});

Bien que, autant que je sache actuellement le type de propagation des fragments ne sont pas générés , sauf si vous utilisez la Hâte module de système d'