fragments.js

/*

Nice things about this approach:

- No need to expose $refs to users. Just use regular IDs instead.
- No need for double-composition (just compose React components, not queries).
- Composition becomes less magical (since we're passing regular IDs around).
- Collapse Query and Fragment concepts into Query.
- Take advantage of existing template strings to pass in query variables.

Drawbacks:

- Requires that every node has a globally unique ID (do we already impose this constraint?)

*/

// TodoItem.js
import type {Todo$DataID} from 'schema.graphql';

type Props = {
  todoDataID: Todo$DataID,
}

function TodoItem(props: Props) {
  let item = useQuery(
    graphql`
      query TodoItem_item on Todo {
        text
        isComplete
      }
    `,
    todoDataID,
    {} /* Optional variables */
  ),
  return (
    <View>
      <Checkbox checked={item.isComplete} />
      <Text>{item.text}</Text>
    </View>
  );
}

// TodoList.js
import {getDataID} from 'relay'

type Props = {
  userDataID: User$DataID
}

function TodoList(props: Props) {
  let data = useQuery(
    graphql`
      query TodoList_list on User {
        todos(first: $first) {
          count
          edges {
            node {
              id
            }
          }
        }
      }
    `,
    props.userDataID,
    {first: props.initialCount ?? 10} /* Optional variables */
   );
  return data.edges.map(edge =>
    <TodoItem todoDataID={getDataID(edge?.node)} />
  )
}