Relay: Parametrize getFragment based on results of a parent query

Question

My CMS returns me a list of nodes each having its own nodetype. For each nodetype I have a corresponding GraphQL type defined.

type getContent {
  content: [ContentNode]
}

I want a query like:

{
  content{
    contentType
    properties {
       ${ContentType.getFragment('content', type: $contentType???)}
    }
  }
}

ContentType would return a correct fragment definition based on type variable provided to it. But how do I get $contentType from parent results?

Answer 1

You can't have fragments that depend on actual value of the parent, because fragments are composed before the query request is actually made to server. There are two different ways to handle this, one is to have fragment vary based on variables and other is to use interface and typed fragments inside your component.

Here is a good answer showing example of using variables: Conditional fragments or embedded root-containers when using Relay with React-Native

For the interface solution, if you have ContentNode an interfaces with implementations like 'ContentNode1' and 'ContentNode2', then you can do something like that:

{
  content {
    ${ContentType.getFragment('content')}
  }
}

And in your ContentType component

fragment on ContentNode {
   contentType
   someOtherCommonField
   ... on ContentNode1 {
     someContent1Field
   }

   ... on ContentNode2 {
     someContent2Field
   }
}