निर्यात किए गए रिलेकंटनर

Question

टाइप करने के लिए कैसे मैं Relay.createContainer के साथ बढ़ रहे घटकों को (प्रवाह प्रकार के साथ) टाइप करने का प्रयास कर रहा हूं।

मैंने "प्रतिक्रिया-रिले" पैकेज द्वारा types exported पर देखा लेकिन 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.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 के उत्पादन में टाइप करने के लिए कोशिश कर रहा हूँ में इतना है कि यह खत्म हो जाता है: लेकिन अगर बार भी एक RelayContainer फू का टुकड़ा प्रवाह को संदर्भित शिकायत करेगा कि यह फू के गुणों में getFragment नहीं मिल सकता था सजाए गए घटक का टाइपिंग। मैंने रिले के आंतरिक प्रकारों को देखा और https://github.com/facebook/relay/blob/8567b2732d94d75f0eacdce4cc43c3606960a1d9/src/query/RelayFragmentReference.js#L211 देखा लेकिन मुझे लगता है कि यह रिले के गुणों में जोड़ने का तरीका नहीं है।

कोई विचार मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

@gre के रूप में इंगित किया गया है, अब रिले कंपाइलर खंड के लिए प्रवाह प्रकार उत्पन्न करता है और इन्हें __generated__ उपनिर्देशिका के भीतर जेनरेट की गई फ़ाइलों में निर्यात किया जाता है।

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