relay-modern FragmentContainer outside QueryRenderer

Question

Is it possible? Can we use FragmentContainer outside a QueryRenderer? What I want to achieve: I have a RefetchContainer with a SectionList. Every item inside each section is a FragmentContainer. When I select an item from a section, I want to open a new screen where I display a FlatList of these items. The data I pass from the SectionList on item select is a list of FragmentContainer. Thus I can't see the data so I need to use fragments for it. If I use just fragments inside the FlatList I get a missing environment from the RelayFragmentContainer. So I added a QueryRenderer as parent for the FlatList where I request the same single section once again. But this makes an extra QueryRenderer request. I want to display the data from the previous screen. At least I pass this list of FragmentContainer as cacheConfig and return it from the fetchQuery method but, the json differs from the response json hence it is not raw data but already __fragments, thus the Relay cannot parse it.

Answer 1

It would be good to get some code examples in this question of what your components and fragments look like. That said, you might want to investigate using the @mask directive.

I've taken an example from the Relay documentation and included it here:

module.exports = createFragmentContainer(
  ({ user }) => ...,
  graphql`
    fragment Component_user on User {
      internUser {
        manager {
          ...Component_internUser @relay(mask: false)
        }
        .... on Employee {
          admins {
            ...Component_internUser @relay(mask: false)
          }
          reports {
            ...Component_internUser @relay(mask: false)
          }
        }
      }
    }

    fragment Component_internUser on InternUser {
      id
      name
    }
  `,
);

By using the @mask data included from a fragment will be available in the component that is hosting the fragment. Relay documentation about this is available here: https://facebook.github.io/relay/docs/relay-directives.html#relay-mask-boolean