LIST OF 10+ AWESOME TOOLS & EXTENSIONS FOR GraphQL APIs

“Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less.”

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. It provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need, and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015. Since that time, GraphQL has been used by teams of all sizes in many different environments and languages to power mobile apps, websites, and APIs. Let’s find out the GraphQL tools and their awesome key features.

GraphiQL

GraphiQL is the popular Integrated Development Environment (IDE) for interacting with GraphQL API calls, enabling developers to query data and perform mutations.

This IDE is relatively easy to implement; for Node.js servers, express-GraphQL can automatically generate GraphiQL. Since it’s built on React, GraphiQL can also be injected with unique CSS for custom branding.

Having visual aid in the form of an API sandbox, playground, CLI, or other interactive means is an important facet of supporting a living, breathing API program that caters to the needs of your developer audience.

undefined

The GraphiQL left column provides a space to enter queries with a syntax editor to search for relevant schema using autocomplete. When the request is run, the response is displayed on the right column.

GraphQL Docs

You need static documentation for a GraphQL API schema? Look no further than GraphQL Docs. The site will generate simple, functional documentation in under 10 seconds given a GraphQL endpoint URL. Visitors can choose to catalogue their API documentation publicly, or to keep it private.gt.

An open-source equivalent for static documentation is graph doc — fork this to generate and host GraphQL docs on your own. For both, the result is a clean interface, search menu, and links to schema definitions for objects, and more.

undefined

GraphQL schema definition for the Album Object in the Spotify API
 

GraphQL Editor

As you might have guessed, this is a visual Node editor which makes it easier to understand GraphQL schemas. You can create a schema by joining visual blocks and GraphQL Editor will transform them into code. For better or worse, this is a “no code solution” that helps your quickly prototype your system’s architecture in a visual way. It even comes with out-of-the-box backend mocks so you can start working right away. 

undefined

GraphQL Voyager

GraphQL Voyager represents any GraphQL API as an interactive visual graph (including these public GraphQL APIs). It provides quick navigation on your graph, a left panel that provides more detailed information about every type, a “skip Relay” option that simplifies graph by removing Relay wrapper classes, and the ability to choose any type to be a root of the graph.

undefined

The Star Wars API (SWAPI) visually represented in GraphQL Voyager

GraphQL Network

Many of us techies are Google Chrome power users, so a GraphQL browser tab is a hot ticket or any serious GraphQL API developer. Called GraphQL Network, this helpful tab is similar to viewing network requests in the Chrome DevTool — which is great for debugging RESTful API calls, but falls short when working with GraphQL, since “/graphql” is usually displayed as the endpoint, meaning that differentiating separate requests is a pain.

The tab shows a concise list of recent GraphQL requests, listing HTTP method name, status, and type of request. In addition, GraphQL Network also gives a raw view of the string of GraphQL being sent, as well as a computed view as the server interprets it. Having separate entries laid out as well as being able to view the machine-readable fragments in this way could be helpful to monitor and debug GraphQL queries.

undefined

GraphQL Faker

If you are mocking up a barebones API, why not add some lorem ipsum data to test things out? With GraphQL Faker, GraphQL API developers can insert realistic data to mimic real-life results. It’s powered by faker.js, enabling developers to mock over 60 kinds of realistic data, like street address, first and last name, avatar images, and more. All you need to initiate it is to write a GraphQL IDL, and GraphQL faker provides some examples to get started within the IDL editor.

undefined

GraphCMS

GraphCMS is an API-centric Content Management System (CMS) that is intimately tied with GraphQL. It lets you build a hosted GraphQL backend for web apps, providing tooling to manage content. Users define data structures, validate them in a GraphQL console, and can see the representation in the user interface, all within the same platform.

While GraphCMS is perhaps not a good fit for an existing API platform, it would cater well to a blog, web app, or other content structures that require the ability to programmatically share data. A GraphQL-based CMS would be an interesting alternative to traditional CMSs like WordPress or Drupal, and would enable a more futuristic content management framework that comes API-equipped and is thus a more flexible management layer for end-user interfaces.

undefined

GraphCMS is a GraphQL-fueled content management system

GraphQL Hook

GraphQL-hooks is a minimal hooks-first GraphQL client for React. It supports custom cache plugins, server-side rendering and requires minimal configuration to get up and running quickly. It only weighs 5.2KB (1.9KB gzipped). It even has support for server-side rendering.

undefined

Quick Start in GraphQL Hook

Prisma

Simply put, Prisma aims to replace traditional ORMs and simplify database workflows. With GraphQL, Prisma makes it easy to implement resilient, production-ready GraphQL servers with pre-made CRUD operations ready to be used, a performant query resolution engine, Apollo (client & server) compatibility, type-safe resolvers and more. View examples project!

URQL

Built by Formidable labs, URQL is a “highly customizable and versatile GraphQL client for React”. This GraphQL client exposes a set of React components and hooks, which-like Apollo-makes it a powerful combination with Bit. The idea in this project is to avoid the larger footprint of most clients, and create a lightweight library that is also complex enough to scale.

undefined

URQL

Swagger to GraphQL

For those API providers entrenched with the traditional REST model, they may be indifferent to try out GraphQL. This mapper takes the pain away, taking a Swagger schema and automatically wrapping it to GraphQL. Tooling like this could be leveraged to decrease migration headaches, and enable a provider to maintain both a REST and GraphQL facade.

undefined

Aiming to be simply effective, ICTS also applies GraphQL into our work so that our customers can benefit in terms of quality and budget. Contact us to discover the benefits we can bring to your software and mobile app development project from the newest innovation in the technology world!

Source: https://nordicapis.com/10-awesome-tools-and-extensions-for-graphql-apis/


Son Chu

You Might Also Like


0 Comment


    Would you like to share your thoughts?

    Your email address will not be published. Required fields are marked *

    This field is required.
    Please provide a valid email address.
    This field is required.