Cannot build a typed interface for this module: createFragmentRef

Question

I have this relay fragment component but Flow says there's an error:

Error:

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression.Flow(signature-verification-failure)

// @flow
import { type Node } from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import type { MyComponent } from './__generated__/MyComponent.graphql';

const RequestTitle = (props: {| request: MyComponent |}): Node => {

  return (
    <Box color="white" display="flex" direction="row" alignItems="center"></Box>
  );
};

export default createFragmentContainer(RequestTitle, {
  request: graphql`
    fragment MyComponent on TakedownRequest {
      id
      title
      primaryType
    }
  `,
});

Aleksey L. Aleksey L. · Accepted Answer · 2021-02-03T06:27:08

types-first requires exported parts of the code to be annotated with types, or to be expressions whose type can be trivially inferred (for example numbers and strings)

So you need explicitly type the export:

import { createFragmentContainer, graphql, type RelayFragmentContainer } from 'react-relay';

// ...

const container: RelayFragmentContainer<MyComponent> = createFragmentContainer(RequestTitle, {
    request: graphql`
    fragment MyComponent on TakedownRequest {
      id
      title
      primaryType
    }
  `,
});

export default container

Cannot build a typed interface for this module: createFragmentRef

1 Answers