New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Level-up Relay types #33

Closed
mrtnzlml opened this Issue Oct 10, 2018 · 1 comment

Comments

1 participant
@mrtnzlml
Owner

mrtnzlml commented Oct 10, 2018

  1. fuck flow-typed for this and import custom types (consider NPM package to share it across other projects)
// prettier-ignore
type $RelayProps<Props, RelayPropT> = $ObjMap<
  $Diff<Props, { relay: RelayPropT | void }>,
    // We currently don't know how to preserve Function and Object type
    // correctly while using `createFragmentContainer`, see:
    // https://github.com/facebook/relay/commit/2141964373703dcaa9bd49aa3cd2e9efdd09425f
    (<T: Function>( T) =>  T) &
    (<T: { +$refType: any }>( T) =>  $FragmentRef<T>) &
    (<T: { +$refType: any }>(?T) => ?$FragmentRef<T>) &
    (<T: { +$refType: any }>( $ReadOnlyArray< T>) =>  $ReadOnlyArray< $FragmentRef<T>>) &
    (<T: { +$refType: any }>(?$ReadOnlyArray< T>) => ?$ReadOnlyArray< $FragmentRef<T>>) &
    (<T: { +$refType: any }>( $ReadOnlyArray<?T>) =>  $ReadOnlyArray<?$FragmentRef<T>>) &
    (<T: { +$refType: any }>(?$ReadOnlyArray<?T>) => ?$ReadOnlyArray<?$FragmentRef<T>>) &
    // see: https://github.com/facebook/relay/blob/v1.7.0-rc.1/packages/react-relay/modern/ReactRelayTypes.js
    // see: https://github.com/sibelius/relay-modern-network-deep-dive/tree/master/flow-typed
    (<T>(T) => T)
>

export function createFragmentContainer<TComponent: React$ComponentType<any>>(
  Component: TComponent,
  fragmentSpec: Object
): React$ComponentType<
  $RelayProps<React$ElementConfig<TComponent>, RelayProp>
> {
  return Relay.createFragmentContainer(Component, fragmentSpec)
}
  1. better tests:
    (TODO - test also collections)
// @flow

import * as React from 'react'
import { createFragmentContainer } from '../index'

const Container = createFragmentContainer(
  (props: {|
    +data: {|
      +required: string,
      +$refType: any
    |},
    +fun?: string => void
  |}) => <React.Fragment />,
  // $FlowExpectedError: this should be a real fragment
  'mocked'
)

const validData = {
  required: 'ok',
  $fragmentRefs: 'whatever' // please note: we are currently not checking the fragment type
}

module.exports = {
  checkMissingProperty() {
    // $FlowExpectedError: missing `data` property
    return <Container />
  },
  checkInvalidProperty() {
    // $FlowExpectedError: data property value should be fragment object (not number)
    return <Container data={1} />
  },
  checkValidProperty() {
    return <Container data={validData} />
  },
  checkToManyProperties() {
    return (
      // $FlowExpectedError: `extraProp` should not be here
      <Container data={validData} extraProp={-1} />
    )
  },
  checkValidFunctionProperty() {
    return <Container data={validData} fun={(_: string) => {}} />
  },
  checkInvalidFunctionProperty() {
    // $FlowExpectedError: function argument should be string, not number
    return <Container data={validData} fun={(_: number) => {}} />
  }
}

@mrtnzlml mrtnzlml closed this in 2934c36 Oct 19, 2018

@mrtnzlml

This comment has been minimized.

Show comment
Hide comment
@mrtnzlml

mrtnzlml Oct 19, 2018

Owner

I didn't remove flow-typed completely yet but I think I will eventually have to do that.

Owner

mrtnzlml commented Oct 19, 2018

I didn't remove flow-typed completely yet but I think I will eventually have to do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment