Mastering GraphQL Development with GraphiQL: A Step-by-Step Guide

Visualizing Your GraphQL Schema with GraphiQL

As developers, we often find ourselves stuck in the command-line interface, overcomplicating things and neglecting the benefits of a graphical user interface. However, even the most seasoned geeks are now favoring GUIs for certain tasks. In this article, we’ll explore how to use GraphiQL to aid GraphQL development and make our lives easier.

What is GraphQL?

Before diving into GraphiQL, let’s quickly discuss what it helps – GraphQL. GraphQL is an open-source data query and manipulation language for application programming interfaces (APIs). It was developed internally by Facebook in 2012 and released to the public in 2015. Developers prefer it over the traditional REST approach due to its flexibility and efficiency.

What is GraphiQL?

Think of GraphiQL as Postman or Insomnia, but for GraphQL. It’s a powerful tool that helps you structure GraphQL queries visually. GraphiQL is the GraphQL integrated development environment (IDE) that makes it easy to work with your GraphQL schema.

Getting Started

To get started with GraphiQL, you’ll need:

• A basic understanding of Node.js and npm
• Familiarity with Express.js and setting up a basic server
• A code editor (such as Visual Studio Code)

Setting up a Project

Create a new folder for your project and run npm init -y to create a package.json file. Then, install the necessary packages by running npm install graphql express-graphql express. Add a script to your package.json file to start the server: "dev": "node app.js".

Understanding the Packages

Let’s break down the packages we installed:

• graphql: provides the necessary methods for working with GraphQL
• express-graphql: allows Express.js to communicate with GraphQL
• express: a popular Node.js web framework

Creating the Server

Create a new file called app.js and paste the following code:
“`javascript
const express = require(‘express’);
const { graphqlHTTP } = require(‘express-graphql’);
const schema = require(‘./schema’);

const app = express();

app.use(‘/graphql’, graphqlHTTP({
schema,
graphiql: true,
}));

app.listen(2020, () => {
console.log(‘Now listening on port 2020’);
});
“`
This sets up a basic Express.js server with GraphQL enabled.

Creating the Schema

Create a new folder called schema and add a file called schema.js. Paste the following code:
“`javascript
const { GraphQLObjectType, GraphQLSchema } = require(‘graphql’);
const _ = require(‘lodash’);

const CountryType = new GraphQLObjectType({
name: ‘Country’,
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString },
capital: { type: GraphQLString },
},
});

const RootQuery = new GraphQLObjectType({
name: ‘RootQuery’,
fields: {
country: {
type: CountryType,
args: { id: { type: GraphQLID } },
resolve(parent, args) {
return _.find(countries, { id: args.id });
},
},
},
});

module.exports = new GraphQLSchema({
query: RootQuery,
});
“
This defines a simple GraphQL schema with aCountrytype and aRootQuery` type.

Testing with GraphiQL

Start the server by running npm run dev and open your browser to http://localhost:2020/graphql. You should see the GraphiQL interface where you can test your GraphQL schema.

Try running a query to retrieve the name and capital of a country with the ID of 1:
graphql
query {
country(id: 1) {
name
capital
}
}

You should see the response on the right-hand side of the screen.

That’s it! You’ve successfully set up a GraphQL schema with GraphiQL.