Q: Defining data requirement in Relay.Route?

[jardakotesovec]

My understanding is that data requirements on Relay Containers are defined statically and are fetched regardless if component is shown.

Therefore logic what data will be actually necessary has to be deduced in Relay.Route from the parameters - that might be coming from url parameters or some other context.

So I guess creating several Relay.Route objects covering different scenarios is way to go currently. I know that its obvious to use multiple Relay.Route when different views are shown. But I mean for example scenario when user is on page with list of albums and clicks on one of them to see pop-up menu with songs list (which is kind of sub-route scenario). That could affect url (using react-router) that could switch to different Relay.Route object that would additionally call getFragment on that pop-up menu.

I noticed in examples that Relay.Route always just call getFragment on Component which is argument. But I assume that calling getFragment directly in Relay.Route also from other components is also reasonable?

Does this approach make sense? Wondering if there are some other tricks how to conditionally change data requirement - and I mean decide whether data be fetched or not (for example based on the fact if pop-up menu is opened or not).

Thanks!

[devknoll]

But I assume that calling getFragment directly in Relay.Route also from other components is also reasonable?

At the moment, there's a 1:1 mapping between a route root query and a fragment. You should also check #20 (comment), because the Component argument is going away too. So, multiple routes probably aren't what you're looking for.

Digging through the source code, you might be able to achieve what you're looking for using variables, doing something like this:

var MyComponentContainer = Relay.createContainer(MyComponent, {
  initialVariables: {
    showPopup: false,
  },
  fragments: {
    album: (variables) => Relay.QL`
      fragment on Album {
        name,
        ${SongList.getFragment('songs').if(variables.showPopup)}
      }
    }``
  }
});

And then running setVariables when you need to get the songs. Note: this is untested, and I have no idea if this will be a supported feature.

[devknoll]

Another possibility would be to just use connections, and do something like:

var MyComponentContainer = Relay.createContainer(MyComponent, {
  initialVariables: {
    songsToShow: 0,
  },
  fragments: {
    album: (variables) => Relay.QL`
      fragment on Album {
        name,
        songs(first: $songsToShow) {
          edges {
            node {
              ${SongList.getFragment('songs')}
            }
          }
        }
      }
    }`
  }
});

and use setVariables again to grab the list.

[jardakotesovec]

These conditional fragments would be great pattern for these use cases.

   ${SongList.getFragment('songs').if(variables.showPopup)}

Could someone from fb please comment if thats pattern we can use at the moment/future?

Thanks

[josephsavona]

@jardakotesovec Sorry for missing this: yes, ${Child.getFragment(..).if(variables.foo)} is supported. Be sure to check the value of variables.showPopup in your render code and skip rendering <SongList> when it's false, otherwise you'll get errors about missing data.

[josephsavona]

@jardakotesovec did that solution work for you? I'm going to close this issue since the question is answered, but feel free to reopen if you have any additional questions!