Back to VS Code home
The GraphQL API Designer streamlines the visual creation of GraphQL APIs in Ballerina. This powerful tool simplifies understanding and navigating of complex GraphQL services and lets you browse through them effortlessly without examining the code directly.
Open the GraphQL API Designer
Use the source code below to create a GraphQL service using the code editor and click on the Visualize codeLens, which is placed above the service.
Explore the GraphQL API Designer
The GraphQL API Designer provides the following features.
- Add GraphQL queries, mutations, and subscription operations
- Create and edit constructs such as records and service classes
- Navigate to the specific source code
Use the GraphQL API Designer functionalities
You can perform the above functionalities using the GraphQL API Designer as follows.
Add a GraphQL query
Add a query to the GraphQL service with a
Profile record as the output object.
Info: Hover over each field to view the provided Edit, Delete, and Design GraphQL operations.
Access the query source
Navigate to the source code of the newly created
profile query and update the resource body. Use Ctrl + Click shortcut on the specific field to navigate to the respective source code.
Create a record construct
Create a record within the GraphQL API Designer itself.
Info: You can use this same approach to create service classes as well.