Compose GraphQL Queries and Mutations using Hasura Explorer

Vladimir Novick
InstructorVladimir Novick
Share this video with your friends

Social Share Links

Send Tweet

While creating your GraphQL API with hasura.io, queries, mutations and subscriptions are auto generated for you. In this video I show an API explorer tool inspired by https://github.com/OneGraph/graphiql-explorer that will help you to compose GraphQL queries by selecting what data you want to present or how you want to filter your queries. This tool is also available as stand alone tool at https://graphiql-online.com

Instructor: [0:00] From graphical tab of my Hasura console, I can query posts to get title, timestamp, and text of my posts. What if I want to add additional arguments here? I can always go to docs to query and see what is available out there. Instead of that, I will use Hasura explorer feature.

[0:26] In order to construct my query, I need simply to select checkboxes to get my query written in a graphical here. I want to query posts. I want to limit them to 20 posts. I want to order them by timestamp in descending manner. I also want to add workloads where I will check my title if it's equal to first post.

[0:53] Let's run that. We'll see one post is available. As you can see, ID was added automatically even though I haven't selected ID as return type here.

[1:05] Let's select more of our each return type. I want to return text, timestamp, title, and user with first name and last name, and maybe even user address. Let's run that. As you can see, everything is returned.

[1:19] What we'll do, we will add a mutation. We want to insert a new post with some text. We want to add the title will be "Fifth Post." We actually want to add a new user by providing user first name and user last name.

[1:45] On returning type, we will return text, title, timestamp, as well as ID. Let's return everything from our user. Let's run that. As you can see, a post is created. If we go to data tab, to posts, we will see Fifth Post with some text. We will also see a new user created for us.