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: #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: #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 #2293

try on master