Match & Module

These directives allow you to lazily load union results. First, it requires JSDependency GraphQL scalar. Next it's necessary to use Union field with this shape:

union FormattedContent = PlainContent | BoldContent
type Todo implements Node {
id: ID!
content(supported: [String!]!): FormattedContent
complete: Boolean!
}

Directive @match can be used on the field content only if it follows this shape. And lastly, directive @module can be used on JSDependency fields:

type BoldContent {
data: BoldContentData
js(module: String): JSDependency
}

Usage:

fragment Todo_todo on Todo {
complete
id
content @match {
...PlainTodoRenderer_value @module(name: "PlainTodoRenderer.react")
...BoldTodoRenderer_value @module(name: "BoldTodoRenderer.react")
}
}
const PlainTodoRenderer = React.lazy(() =>
import(/* webpackChunkName: "PlainTodoRenderer" */ './PlainTodoRenderer'),
);
const BoldTodoRenderer = React.lazy(() =>
import(/* webpackChunkName: "BoldTodoRenderer" */ './BoldTodoRenderer'),
);
const MatchContainer = ({ match, fallback }: Props) => {
switch (match.__module_component) {
case 'BoldTodoRenderer.react':
return (
<React.Suspense fallback={fallback}>
<BoldTodoRenderer value={match} />
</React.Suspense>
);
case 'PlainTodoRenderer.react':
return (
<React.Suspense fallback={fallback}>
<PlainTodoRenderer value={match} />
</React.Suspense>
);
default:
return 'Nothing matched...';
}
};

still researching