The generation of schemas and types within Payload has always been simple. For GraphQL, you run
yarn payload generate:graphqlschema and a GraphQL schema is created. For TypeScript, you run
yarn payload generate:types and a type definition file is created.
While this process works well, it can become tedious when working with deeply nested types. With the new
interfaceName property, you can create a reusable type that gets hoisted to the top level in your generated TS and GraphQL files.
This new pattern really shines in TypeScript when creating blocks. Here we have an example Pages config, it has a blocks field named
layout with two blocks to choose from.
In the past the above collection config would generate the following typescript types:
You no longer need to create the custom type yourself, you can now use
interfaceName and Payload will generate top level types for you. Using this approach means the typescript type is no longer tied to the Pages collection and you can name it uniquely.
This is super powerful. Using the component based approach to build your frontends should be pretty intuitive using this feature. In the above case you could build a SectionHeadingBlock and a FormBlock component, import the types that you generated and you are set up for success. No more needing to extract the types from the parent collection.
This new feature is just as useful in GraphQL. Let's say you want to fragment parts of a group field for reusability. The following collection configs, Pages and Posts, both use a shared field:
When interfaceName is not used, the GraphQL Schema generated looks like:
And when interfaceName is used, the GraphQL Schema will look like:
This unlocks the ability to create fragments to use within your GraphQL queries:
Overall I think this is a small but big win pushing Payload’s type systems further. This is nice when you need to hoist a custom type up to the top for any reason. This is now available for
named-tab fields. Here is a link to the PR if you want to take a closer look.
The `interfaceName` property gives you more control as a developer. Type composability can be made much simpler, no need to extract deeply nested types.