Cómo escribir un RelayContainer exportado

Question

Cómo escribir un RelayContainer exportado

Estoy tratando de escribir (con flowtype) los componentes que estoy mejorando con Relay.createContainer.

Investigué los tipos exportadospor el paquete "react-relay", pero ReactContainer no parece llevar Props.

Experimenté con RelayContainer, ReactClass, React$Component etc, al final, lo más cercano al resultado esperado que pude obtener es :

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

Ahora flow se quejará en Foo.js alrededor de los apoyos que Bar no proporciona el apoyo de título, que un poco lo que quiero (me gustaría que se quejan en Bar.js pero es un detalle). Sin embargo, si Bar fuera también un RelayContainer haciendo referencia al flujo de fragmentos de Foo se quejaría de que no puede encontrar getFragment en las propiedades de 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")}
      }
    `
  }
}

Al final estoy tratando de escribir la salida de Relay.createContainer para que se lleva sobre la tipificación del componente decorado. Miré los tipos internos del Relé y vi https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211 pero siento que no es el camino a seguir para agregar las propiedades del Relé.

Alguna idea de cómo podría lograr esto ?

46

javascript reactjs relayjs flowtype

Author: Maksim Kalmykov, 2016-09-07

Source

1 answers

score 3 · Accepted Answer

Como señaló @gre, ahora el compilador Relay genera tipos de flujo para el fragmento y estos se exportan en archivos generados dentro de un subdirectorio __generated__.

Generando dicho archivo ejecutando el compilador Relay

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

Luego importaría los tipos de flujo para los props de campo de la siguiente manera:

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

Aunque actualmente los tipos de AFAIK para fragmentos esparcidos no se generan a menos que utilice el sistema de módulos Haste