useLazyFragment example

useLazyFragmentExample.js

const FriendsList = props => {
  const data = useFragment(
    graphql`
      fragment FriendsList_person on Person {
        friends {
          id
          name
          ...FriendDetails_friend
        }
      }
    `,
    props.person
  );

  const [expandedFriendIds, setExpanded] = useState([]);
  const toggleExpanded = friendId => {
    /* ... */
  };

  return data.friends.map(friend => (
    <div key={friend.id}>
      <b onClick={() => toggleExpanded(friend.id)}>{friend.name}</b>
      {expandedFriendIds.includes(friend.id) && (
        <Suspense fallback="fetching friend details">
          <FriendDetails friend={friend} />
        </Suspense>
      )}
    </div>
  ));
};

// FriendDetails is a conditionally rendered component
// therefore we don't need to load its data until the user clicks to expand it
const FriendsDetails = props => {
  const data = useLazyFragment(
    graphql`
      fragment FriendDetails_friend on Friend {
        id
        name
        age
        nickname
      }
    `,
    props.friend
  );

  return <div>{/* render details */}</div>;
};