javascript - texto - Cómo escribir un RelayContainer exportado

obtener datos de una tabla html javascript

Question

Estoy intentando escribir (con flujo) los componentes que estoy mejorando con Relay.createContainer .

ReactContainer los tipos exportados por el paquete "reaccionar-retransmitir", pero ReactContainer no parece llevar Props.

Experimenté con RelayContainer , ReactClass , React$Component , etc. Al final, lo más parecido al resultado esperado que podría 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 Props que Bar no proporciona el título prop, que es lo que quiero (me gustaría que se queje en Bar.js pero es un detalle). Sin embargo, si Bar también fuera un RelayContainer 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, intento escribir la salida de Relay.createContainer para que transmita la escritura del componente decorado. Miré en los tipos internos del Relay 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 en las propiedades de Relay.

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

Answer 1

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

generar dicho archivo ejecutando el compilador de retransmisión

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

A continuación, importaría los tipos de flujo para los accesorios 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 los tipos actuales de AFAIK para fragmentos extendidos no se generan a menos que use el sistema de módulo Haste