forceFetch a specific fragment from a Relay container

Question

If a container has multiple fragments, how can I forceFetch only one of them ?

Relay.createContainer(MyContainerComponent, {
    fragments: {
        fragment1: () => Relay.QL`my first fragment`,
        fragment2: () => Relay.QL`my second fragment`
    } 
});

According to the docs, calling this.props.relay.forceFetch() will update every fragments associated to the container.

While force fetching 'as is' does the job, the whole point of Relay is to avoid over/under fetching.

Any advice ?

Answer 1

Refetches are managed by the container, so one solution would be:

Relay.createContainer(MyContainerComponent, {
    fragments: {
        fragment1: () => Relay.QL`fragment on SomeThing { ${SomeThingContainer.getFragment("something")}`,
        fragment2: () => Relay.QL`fragment on OtherThing { ${OtherThingContainer.getFragment("otherthing")}`
    } 
});

Then just use the two sub containers to refetch their individual fragments.

If you actually need data from both fragments in MyContainerComponent so you can't separate those into sub-containers, refetching the full container fragment makes sense for me...

However, if you really need data from both fragments and you really only want to refetch one of them, you can always use the imperative Store API to execute an ad-hoc query for whatever you want. See this question for details on that.

ASIDE:

the whole point of Relay is to avoid over/under fetching

I disagree... That's a welcome benefit of course, but the real "point" is to be a declarative framework for getting data to your components. There is no simple, declarative API for refetching individual container fragments, true. Maybe there should be! But I think it's probably more likely that you are prematurely optimizing here :)