내보낸 릴레이 컨테이너 입력 방법
확장 중인 컴포넌트를 (플로 타입으로) 입력하려고 합니다.Relay.createContainer
.
"react-relay" 패키지로 수출된 종류를 조사했는데 React Container가 Propes를 인계하지 않는 것 같습니다.
나는 로 실험했다RelayContainer
,ReactClass
,React$Component
etc, 결국 내가 얻을 수 있는 가장 기대되는 결과는 다음과 같습니다.
// 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의 fragment flow를 참조하면, Foo의 fragment flow를 찾을 수 없다고 불평할 수 있습니다.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의 재산을 추가하는 방법은 아닌 것 같아요.
내가 어떻게 이 일을 해낼 수 있을까?
@gre가 지적한 바와 같이 현재 릴레이 컴파일러는 fragment의 흐름유형을 생성하고 이러한 흐름유형은 fragment 내의 생성된 파일로 내보냅니다.__generated__
서브 디렉토리
릴레이 컴파일러를 실행하여 해당 파일 생성
relay-compiler --src ./src --schema ./schema.json
그런 다음 다음과 같이 필드 소품 흐름 유형을 가져옵니다.
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
}
}
}
`
});
AFAIK는 현재 확산된 fragment 유형을 생성하지 않습니다만, Jush 모듈 시스템을 사용하지 않는 한
언급URL : https://stackoverflow.com/questions/39358847/how-to-type-an-exported-relaycontainer
'programing' 카테고리의 다른 글
Oracle: CSV 파일 Import (0) | 2023.03.27 |
---|---|
모든 ACF 필드를 Wordpress REST API에 표시하는 방법 페이지와 사용자 지정 포스트타이프 (0) | 2023.03.27 |
Angular & Express를 사용하여 사용자를 로그인하는 적절한 방법은 무엇입니까? (0) | 2023.03.27 |
리모트 wp-admin이 localhost로 리다이렉트 되는 이유는 무엇입니까? (0) | 2023.03.27 |
GSON에서의 범용 타입의 시리얼화 해제 (0) | 2023.03.27 |