Search code examples
flowtyperelayjs

Need help understanding some Flow type syntax

I’m working on porting the Flow type generator that comes with a library (Relay) to one that emits TypeScript types, but have some questions about some Flow syntax that’s not obvious to me in this snippet:

import type { FragmentReference } from 'relay-runtime';
export opaque type TypenameInside$ref: FragmentReference = FragmentReference;
export type TypenameInside = ({|
  +__typename: 'User',
  +firstName: ?string,
  +$refType: TypenameInside$ref,
|} | {|
  +__typename: 'Page',
  +username: ?string,
  +$refType: TypenameInside$ref,
|} | {|
  // This will never be '%other', but we need some
  // value in case none of the concrete values match.
  +__typename: '%other',
  +$refType: TypenameInside$ref,
|});

Namely, what are $ref, $refType, and %other? Or are they not Flow specific, but rather Relay specific?

I tried searching the flowtype docs and repo, but had a very hard time coming up with answers. Links to the docs and/or relevant portions of the implementation would be greatly appreciated as well.

Solution

  • $ref, $refType etc. are normal type names.

    The $ prefix for types are a convention to denote utility types such as $Keys, though doesn't look like the convention is followed here.

    %other is just a normal string. Relay probably uses the string for some special purpose internally.