Relay: Flow: property $refType is missing in object

[mrtnzlml]

Hello. 👋 We use generated Flow types in our functions like this for example:

export default (room: ?BeddingInfo_room): string => {
  // ...
};

Problem is that Relay is generating Flow types with +$refType:

import type { ConcreteFragment } from 'relay-runtime';
import type { FragmentReference } from 'relay-runtime';
declare export opaque type BeddingInfo_room$ref: FragmentReference;
export type BeddingInfo_room = {|
  +type: ?string,
  +maxPersons: ?number,
  +bedding: ?$ReadOnlyArray<?{|
    +type: ?string,
    +amount: ?number,
  |}>,
  +$refType: BeddingInfo_room$ref,   // <<<
|};

This, unfortunately, complicates our testing because we cannot use simple plain objects (without the $refType):

expect(
  // Flow error here (vv) because Relay $refType is missing in the object
  formatBeddingInfo({
    type: 'Single Room',
    maxPersons: 1,
    bedding: [
      {
        type: 'Single Bed(s)',
        amount: 1,
      },
    ],
  }),
).toMatchSnapshot();

I don't really understand why is this property necessary but is it possible to make it at least optional? Or how should we test it properly? It was fine before version 1.5... Error message:

Cannot call formatBeddingInfo with object literal bound to room because property $refType is missing in object
literal [1] but exists in BeddingInfo_room [2].

     app/hotels/src/singleHotel/roomList/__tests__/formatBeddingInfo.test.js
      4│
      5│ it('formats bedding information', () => {
      6│   expect(
 [1]  7│     formatBeddingInfo({
      8│       type: 'Single Room',
      9│       maxPersons: 1,
     10│       bedding: [
     11│         {
     12│           type: 'Single Bed(s)',
     13│           amount: 1,
     14│         },
     15│       ],
     16│     }),
     17│   ).toMatchSnapshot();
     18│ });
     19│

     app/hotels/src/singleHotel/roomList/formatBeddingInfo.js
 [2]  7│ export default (room: ?BeddingInfo_room): string => {

[sibelius]

you can use $RelayProps https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayTypes.js#L101

[mrtnzlml]

@sibelius Oh, that would probably solve my problem. But is it exported outside of the react-relay package? I am not able to find it (or figure out how to use it correctly).

EDIT: I am not sure about that. That won't solve my issue since the $refType is still required (?).

[juhaelee]

@mrtnzlml did you find a solution for this? I believe this issue is related as well: https://github.com/facebook/relay/issues/2316

[mrtnzlml]

@juhaelee I did not. We are just ignoring the errors for now until we find a better solution. I was quite surprised that no one noticed this change so 1) no one upgraded or 2) we are testing it wrong... :)

[juhaelee]

@mrmlnc I see, I also seemed to get flow errors on mutations as well ever since the upgrade :/

[mrmlnc]

@juhaelee, I think you wanted to mention @mrtnzlml :)

[kassens]

Hey, sorry for not responding here earlier.

To unblock your tests for now, you can do something like:

// Maybe define this in some utility
const mockRefType: any = null;

expect(
  // Flow error here (vv) because Relay $refType is missing in the object
  formatBeddingInfo({
    $refType: mockRefType,
    type: 'Single Room',
    maxPersons: 1,
    bedding: [
      {
        type: 'Single Bed(s)',
        amount: 1,
      },
    ],
  }),
).toMatchSnapshot();

I do think there should be more work done on testability and making the testing more ergonomic.

[roballsopp]

My theory for the root cause is the flow type for $RelayProps (and therefore createFragmentContainer) is incorrect: https://github.com/facebook/relay/issues/2443. If I'm right, the fix might be pretty simple.

[bastoche]

There is actually a workaround described in the relay doc:

Applied to a fragment definition, @relay(mask: false) changes the generated Flow types to be better usable when the fragment is included with the same directive. The Flow types will no longer be exact objects and no longer contain internal marker fields.

To be clear, you need to add @relay(mask: false) both when defining the fragment:

fragment Todo_todo on Todo @relay(mask: false)

and when using it:

...Todo_todo @relay(mask: false)

You will find a working example in this repository.

[sibelius]

this PR could have solved this https://github.com/facebook/relay/pull/2293

try on master

[creatyvtype]

@sibelius it did not. Just upgraded from 1.4.1 to 2.0.0 and we have hundreds of these flow errors now. the mockRefType workaround that @kassens suggested works, but I can't just go through each error and add this one by one. This is a big problem for us. The same goes for $fragmentRefs

[steida]

Before I switched to TypeScript, I was manually fixing generated types as a workaround.

[artola]

@steida By the way, then how did you solved it in TS?

I have a generic (NoFragmentRefs<T>) to cleanup recursively the references and I use it for component data and to prepare the fixtures.

[steida]

@artola Check here https://github.com/este/este

[kassens]

Check out https://github.com/relayjs/relay-examples/tree/master/todo, @Stephen2 has been working with me to figure out the typing in OSS. The types exported from flow-typed seem to be a bit off and he's been looking in fixing them.

I'm pretty sure they work as defined in relay iself. We use them all over the place internally.