Skip to main content
In a service-first approach, teams design APIs around existing services and build in silos. A schema-first approach inverts this: the UI requirement drives the schema, and the services follow. Use this guide to turn a UI design into a concrete GraphQL operation, create any missing fields inline, and assign them to subgraphs without waiting on backend teams.

​
Walkthrough

​
1. Add Your UI Mockup to the Canvas

Drag an image onto the canvas, paste from your clipboard, or select Create → UI Mock from the action bar. PNG, JPG, and Figma screenshots are supported.

​
2. Select the Section That Needs Data

Click and drag to highlight the section of the UI you are building. Hub creates a connected Operation Builder node for that section automatically.

​
3. Build the Query Your UI Requires

In the Operation Builder, select an operation type from the dropdown and enter an operation name inline next to the query root. The field explorer lists all available query fields from the supergraph alongside their return types.
Use the search bar to find fields quickly, or browse the list and select every field your UI section needs. Selected fields are highlighted in pink with a checkbox. The operation preview on the right updates as you make selections.
Include every field your UI requires, even if you are unsure they exist yet. You will create any missing fields in the next step.

​
4. Create Missing Fields Inline

If the field explorer does not include a field you need, click + next to the relevant type to open the Create New modal. Select the type you want to add the field to from the dropdown, then fill in the field row: enter a name, and select a return type from the searchable dropdown. The type list includes scalars (Boolean, Float, ID, Int, String), enums, and any object types already in your graph. Use the [ ] toggle to configure the field modifier. This expands a dropdown with the following options: Required marks the field as non-nullable, List returns the field as an array, List Required marks the field as a non-nullable array, and Custom Input lets you define a custom modifier. Select + Add Argument if the field requires one.
To add multiple fields at once, select + Add Field to add a new row. Each row has its own name, type, list toggle, and confirm tick — confirm each row individually before selecting Create. Enable Create More to keep the modal open after each creation.
The modal also has a New Type tab if you need to create an entirely new type rather than adding fields to an existing one.

​
5. Place the Query on the Canvas

After selecting your fields in the Operation Builder — highlighted in pink with checkboxes — click Show Selected Fields on Canvas. Hub places the types your operation depends on as connected nodes on the canvas, linked by arrows that show the relationships between them. Each node displays only the fields you selected, with a “Showing X / Y fields” count at the bottom indicating how many fields are visible out of the total available on that type. Newly created fields appear at the top of their node with a distinct icon marking them as unassigned — no subgraph resolves them yet.

​
6. Assign New Fields to a Subgraph

Click the unassigned indicator icon on the field row to open the Assign to subgraph dropdown. Select an existing subgraph from the list to assign the field to it. If the field requires a dedicated service, select Create new subgraph at the bottom of the dropdown to create one inline.
If you are unsure which service should own the field, Governance shows type ownership so you can identify the right team and hand off accordingly. Hub handles entity keys and composition automatically.
A GraphQL operation derived from your UI requirement. Missing fields are created, assigned to subgraphs, and visible on the canvas. Unassigned indicators mark any fields that still need placement.