How GraphQL Can Improve the Workflow Between UX Designers and Developers
A Guide to GraphQL for UX Designers
Nikhil Kumar, Software Engineer| Sunju Yeo, Product Designer
Non-technical team members sometimes struggle with understanding the core database schema of a digital product. For example, traditionally, when a UX designer needed to understand how data would be displayed, they’d have to communicate with the developer to set up the data structure in systems. She might have to ask the developer about every field in order to understand what the data consists of and how she can work with it.
But imagine a situation where a UX designer can query data herself. Accordingly, she creates the UI element in wireframes, such as the input with a certain size or a radio group for two fixed values. Imagine how much time this would save, since both developers and designers wouldn’t need to communicate to implement every single change. Well, there’s a way to do that — through GraphQL — and we at Favorite Medium are sharing how a non-technical team member can use it in this post.
Though it’s an uncommon way for UX designers and non-technical team members to collaborate on a product, we think it’s a game-changer. In this post, we’ll go over the process, tools, and techniques for a non-technical team member to understand the technical side of GraphQL.
What is GraphQL?
GraphQL is an open-source data query and manipulation language for APIs. It brings you the answers for the query with the existing data from the underlying datastore. With GraphQL, you can precisely query particular data from a table and its relations. In this way, GraphQL saves time and resources when it comes to frontend development. Before GraphQL, the frontend developer would obtain all the data, then laboriously filter for the desired data. But GraphQL has the capability to query the data from multiple sources/tables/schemas. Even when the data is scattered all over the database, GraphQL can collect and coherently present them to you in one place. By using GraphQL, you can get only the data you need or want to know about, easily and all at once.
Using Hasura with GraphQL
To use GraphQL, you need a GraphQL server such as Hasura. Hasura GraphQL Engine is an open-source project (also offered as a commercial service) that connects your databases and microservices and auto-generates a production-ready GraphQL backend. It essentially gives you a real-time GraphQL API instantly. Hasura Cloud treats your GraphQL backend as a fully managed infrastructure component. It takes care of all the performance, security, and reliability requirements of our API layer. Overall, Hasura provides an easy interface where we can see and interact with data.
Ways to Use GraphQL While Wireframing
There are numerous UX iterations happening between designers and developers at the stage of wireframing. One thing that people spend most of their time on, aside from their work, is communication. And more specifically, the communication to update each other.
Conventionally, at the wireframe stage, there are instances when a developer makes changes to the schema and informs the designer of the changes. But the designer doesn’t necessarily see what changes the developer has made directly in the database. In the same situation using GraphQL, though, designers can visit and check the updated part and even the details of the fields and apply changes to the design. Knowing details can help to set up the wires since the design may vary in input sizes, limits, and corresponding UI elements depending on which type each column has been set at.
Using GraphQL eliminates the need for lots of back-and-forth dialogue about the details of each column. Designers can usually understand underlying details about the data structures by executing just a few simple queries. Moreover, when designers find something missing from the schema or want to supplement the data, they can handle it on their own. Using GraphQL saves significant time on UX iteration.
Using GraphQL for Analysis
GraphQL can benefit designers more than just as a tool for interacting with developers. The data-driven from the nested tables and queries can be used for analysis to optimize the project.
For example, designers can identify the usage pattern and understand how the audience is using the product by looking at the data. Fields that don’t have as many responses as other fields may be an indication that there are issues with them. Perhaps users feel that a field is unnecessary or that it’s not user friendly and hard to understand what it asks for. Some things unlikely to be surface on user feedback can be identified in this way.
When it comes to analyzing data, GraphQL is also easier than writing raw SQL queries. Because of its simple query structure and auto-completion, GraphQL is easy to use. Moreover, from the product point of view, GraphQL is used to query APIs but SQL works directly over the database. This is a subtle but important distinction.
Understanding the user is key to the direction of the product and satisfying the target audience. By using GraphQL, designers can get one step closer to the target audience and make the product even more friendly to use.
Getting Started with GraphQL
GraphQL has three types of operations: Query, mutation, and subscription (which we’re not going over in this post)
Query: Querying is where you ask for some specific data from a database/schema, whether it’s all records, a subset, or a single record.
Mutation: Changing data in a schema, such as updating a particular record, adding a new record, and deleting a record.
The two tables above are “Student” table and “Final_Grades” table. Each table has columns and those are shown on the user screen as labels for each field. Among them, “ID” in “Student” table and “Student_id” in “Final_Grades” table have a universally unique identifier (UUID) value for their column. The field under the column having UUID value must have an input that is unique and does not overlap with others. So UUID is a unique key.
As you can see, the tables above are linked to each other via foreign keys, and the two columns linked share UUID values.
Now, let’s take a look at how to query and mutate the data.
Query Examples
- Query
You can simply query the data from the table, pick particular data from the table, or get data from multiple tables.
a. Querying the table data
This example shows how to query simple data from the table. The field data under the columns that have been called out would appear.
b. Querying a particular record
When you are given an ID but you don’t have any idea whose information it is, you can call out the data by using the auto-generated “Student_by_pk” lookup. The query result will show up on the right-hand side.
c. Querying a record from the tables linked via foreign keys
When there are two tables linked and if you need data from both tables, this is the method you would use. Get the primary key that bridges both tables and query the data by calling out two tables one by one and its columns.
2. Mutation
Occasionally, the data needs to be updated or removed and this is when mutation is needed.
a. Inserting a new record
In the case where data is added manually, the UUID cannot be generated by an embedded generator in Hasura. Therefore, you have to get a UUID by using a separate random generator. Other than that, filling out the fields under each column is all you need to do.
b. Deleting a record
To delete an object, the ID, or whatever that has unique value as UUID is all that you need to identify the object. Put it into the code and you will see it removed from the table.
Conclusion
GraphQL does have a slight learning curve, but once you get the hang of it, your product design and development working process will become more efficient. Having control over querying the data as a UX designer saves time and effort for both you and your developer colleagues. GraphQL can also make working on wireframes and conducting analysis smoother. With GraphQL, your product perspective will be broader and there can be new insights to improve your product features as well. Its benefits — saving time and speeding up the development process — are worth the learning curve.
We hope this article helped shed some light on how working with GraphQL can improve your design and development workflows.
In our next post, we’ll discuss setting up Hasura and database schemas. This step-by-step guide will show you how to evaluate and execute queries on schemas directly. With this post and the next, you’ll be ready to try your hand at GraphQL.
