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

type Props = {
  todoID: FBID
}

function TodoItem(props: Props) {
  let item = useQuery(graphql`
    query TodoItem_item on Todo(id: ${props.todoID}) {
      text
      isComplete
    }
  `)
  return (
    <View>
      <Checkbox checked={item.isComplete} />
      <Text>{item.text}</Text>
    </View>
  );
}

// TodoList.js

type Props = {
  userID: FBID
}

function TodoList(props: Props) {
  let list = useQuery(graphql`
    query TodoList_list on User(id: ${props.userID}) {
      count
      edges {
        node {
          id
        }
      }
    }
  `) 
  return list.map(todo =>
    <TodoItem todoID={todo.id} />
  )
}