programing

내보낸 릴레이 컨테이너 입력 방법

batch 2023. 3. 27. 21:07
반응형

내보낸 릴레이 컨테이너 입력 방법

확장 중인 컴포넌트를 (플로 타입으로) 입력하려고 합니다.Relay.createContainer.

"react-relay" 패키지로 수출된 종류를 조사했는데 React Container가 Propes를 인계하지 않는 것 같습니다.

나는 로 실험했다RelayContainer,ReactClass,React$Componentetc, 결국 내가 얻을 수 있는 가장 기대되는 결과는 다음과 같습니다.

// 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가 또한RelayContainerFoo의 fragment flow를 참조하면, Foo의 fragment flow를 찾을 수 없다고 불평할 수 있습니다.getFragmentFoo의 속성:

// 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#L211Relay의 재산을 추가하는 방법은 아닌 것 같아요.

내가 어떻게 이 일을 해낼 수 있을까?

@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

반응형