helielson

class ProfileName extends React.Component {
  componentDidMount() {
    profileInfoViewed('ProfileName', this.props.profile);
  }

  render() {
    return (
      <View>
        <Text>{this.profile.name}</Text>
      </View>

helielson

#!/bin/bash
set -e

echo "Rename files"

for file in $(find src/ -name "*.js" | grep -v __generated__ | grep -v __tests__); do
  mv "$file" "${file%.js}.ts"
done

echo "Removing type import keyword..."

helielson

// ScreenA
const ScreenAQuery = graphql`
  query ScreenAQuery {
    root {
      me {
        name
      }
    }
  }
`;

helielson

import useLazyLoadQuery from 'react-relay/lib/relay-experimental/useLazyLoadQuery';

function Component () {
  const { root } = useLazyLoadQuery(ScreenAQuery, null, {
    fetchPolicy: 'store-or-network',
  });
  ...
}

helielson

import RelayEnvironmentProvider from 'react-relay/lib/relay-experimental/RelayEnvironmentProvider';
import useLazyLoadQuery from 'react-relay/lib/relay-experimental/useLazyLoadQuery';

// ScreenA
function ScreenA() {
  const { root } = useLazyLoadQuery(ScreenAQuery, null, {
    fetchPolicy: 'store-or-network',
  });
  return (
    <RelayEnvironmentProvider environment={environment}>

helielson

  _traverse(node: NormalizationNode, dataID: DataID): void {
    const status = this._mutator.getStatus(dataID);
    if (status === UNKNOWN) {
      this._handleMissing();
    }
    if (status === EXISTENT) {
      this._traverseSelections(node.selections, dataID);
    }
  }
  

helielson

  case 'store-or-network': {
    shouldFetch = !hasFullQuery;
    shouldAllowRender = canPartialRender;
    break;
  }
  
  // https://github.com/facebook/relay/blob/66e747a68b8fac474fa44b4eb441c72c72daf89e/packages/relay-experimental/QueryResource.js#L392-L395

helielson

// ScreenB
const ScreenBQuery = graphql`
  query ScreenBQuery {
    root {
      events(first: $first) {
        edges {
          node {
            title
          }
        }

helielson

// ScreenBDetail
const ScreenBDetailQuery = graphql`
  query ScreenBDetailQuery {
    root {
      event(id: $someId) {
        title
      }
    }
  }
`;

helielson

{
  "events": {
    "edges": [{
      "node": {
        "eventId": 1,
        "title": "My event"
      }
    }]
  }
}