Getting additional data for one item in a list request

Question

I am trying to do something like this with React and Relay - smooth animation from a list to a separate element.

Currently, I have a list component (list query) and a single element component (node ​​query), but there is a problem: these are two different, isolated views and queries, I can’t imagine an easy way to smooth the animation between these two views.

---

The easiest way is to convert / scale the same list item:

Part of the answer is simple, I calculated the screen size on click and convert the list item to full screen size.

---

What about the data? Is this possible with Relay? Can I get more data for one item in a list request or can I use a node request in the same component, a'la use two queries for each component?

---

// Simple list query example

export default Relay.createContainer(PostList, {
    initialVariables: {
        count: 10
    },
    fragments: {
        viewer: () => Relay.QL`
            fragment on Viewer {
                posts(first: $count) {
                    edges {
                        node {
                            id
                            title
                        }
                    }
                }
            }`
    }
})

// What if I needed to fetch "content" for a single item as well?

Answer 1

Yes, you can get multiple snippets for each component. My suggestion here would be to have a separate snippet for the selected message and use it in a route designed to present the details of the record (permalink).

First add a snippet to represent the selected message.

export default Relay.createContainer(PostList, {
  initialVariables: {
    count: 10,
  },
  fragments: {
    selectedPost: () => Relay.QL`
      fragment on Post {
        id
        title
        description
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        posts(first: $count) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    `,
  },
});

. , .

class IndexRoute extends Relay.Route {
  static queries = {
    viewer: () => Relay.QL`query { viewer }`,
  };
  static routeName = 'IndexRoute';
}

class PostPermalinkRoute extends Relay.Route {
  static queries = {
    selectedPost: () => Relay.QL`query { node(id: $postID) }`,
    viewer: () => Relay.QL`query { viewer }`,
  };
  static paramDefinitions = {
    // By setting `required` to true, `PostPermalinkRoute` 
    // will throw if a `postID` is not supplied when instantiated.
    postID: {required: true},
  };
  static routeName = 'PostPermalinkRoute';
}

, , permalink. Relay , , , .

function render(route) {
  ReactDOM.render(
    <Relay.RootContainer
      Component={PostList}
      route={route}
    />,
    container,
  );
}

// When it time to render the index...
render(new IndexRoute());

// Upon selecting a post...
render(new PostPermalinkRoute({postID: 123}));

this.props.relay.route, , this.props.relay.route.name this.props.relay.route.params.