DEV Community

Cover image for 3 New GraphQL Developer Tools to Increase Coding Productivity
Lucia Cerchie for StepZen

Posted on • Edited on • Originally published at stepzen.com

6 1

3 New GraphQL Developer Tools to Increase Coding Productivity

In our mission to make building GraphQL APIs easier for every developer, StepZen developed tools to get you started quickly and with either no- or low- code. In this post, we’ll explore some of the tools we’ve built. We’ll take a look at REST2GraphQL, an interface that enables you to convert your REST API into a GraphQL endpoint, as well as JSON2SDL, which enables you to transform JSON to Schema Definition Language. You’ll also learn how to use the StepZen cli to import a GraphQL API in a short tutorial. Let’s get started!

REST2GraphQL

With REST2GraphQL, you can enter a REST endpoint, click submit, and receive a new endpoint to access the GraphQL version of the API.

graphql interface gif

Converting REST to GraphQL is useful for many reasons. Among them is the introduction of REST to your GraphQL layer. I encourage you to give REST2GraphQL a try as a way of testing out StepZen as your GraphQL mechanism.

JSON2SDL

json2sdl interface gif

JSON2SDL.com is a great tool to convert JSON results into a GraphQL schema. You can use it when you only need to convert part of a REST API’s functionality to GraphQL. For example, a GET call to Github’s meta endpoint, https://api.github.com/ returns this data:

{
  "current_user_url": "https://api.github.com/user",
  "current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}",
  "authorizations_url": "https://api.github.com/authorizations",
  "code_search_url": "https://api.github.com/search/code?q={query}{&page,per_page,sort,order}",
  "commit_search_url": "https://api.github.com/search/commits?q={query}{&page,per_page,sort,order}",
  "emails_url": "https://api.github.com/user/emails",
  "emojis_url": "https://api.github.com/emojis",
  "events_url": "https://api.github.com/events",
  "feeds_url": "https://api.github.com/feeds",
  "followers_url": "https://api.github.com/user/followers",
  "following_url": "https://api.github.com/user/following{/target}",
  "gists_url": "https://api.github.com/gists{/gist_id}",
  "hub_url": "https://api.github.com/hub",
  "issue_search_url": "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}",
  "issues_url": "https://api.github.com/issues",
  "keys_url": "https://api.github.com/user/keys",
  "label_search_url": "https://api.github.com/search/labels?q={query}&repository_id={repository_id}{&page,per_page}",
  "notifications_url": "https://api.github.com/notifications",
  "organization_url": "https://api.github.com/orgs/{org}",
  "organization_repositories_url": "https://api.github.com/orgs/{org}/repos{?type,page,per_page,sort}",
  "organization_teams_url": "https://api.github.com/orgs/{org}/teams",
  "public_gists_url": "https://api.github.com/gists/public",
  "rate_limit_url": "https://api.github.com/rate_limit",
  "repository_url": "https://api.github.com/repos/{owner}/{repo}",
  "repository_search_url": "https://api.github.com/search/repositories?q={query}{&page,per_page,sort,order}",
  "current_user_repositories_url": "https://api.github.com/user/repos{?type,page,per_page,sort}",
  "starred_url": "https://api.github.com/user/starred{/owner}{/repo}",
  "starred_gists_url": "https://api.github.com/gists/starred",
  "topic_search_url": "https://api.github.com/search/topics?q={query}{&page,per_page}",
  "user_url": "https://api.github.com/users/{user}",
  "user_organizations_url": "https://api.github.com/user/orgs",
  "user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}",
  "user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}"
}
Enter fullscreen mode Exit fullscreen mode

Oof! Let’s say you only need the data coming back that directly relates to users. That’s:

{
  "current_user_url": "https://api.github.com/user",
  "current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}",
  "user_url": "https://api.github.com/users/{user}",
  "user_organizations_url": "https://api.github.com/user/orgs",
  "user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}",
  "user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}"
}
Enter fullscreen mode Exit fullscreen mode

Paste that into JSON2SDL.com, and boom! you’ve got a nicely pared-down GraphQL schema.

type Root {
  current_user_authorizations_html_url: String
  current_user_url: String
  user_organizations_url: String
  user_repositories_url: String
  user_search_url: String
  user_url: String
}
Enter fullscreen mode Exit fullscreen mode

stepzen import

StepZen’s cli tool enables you to import all kinds of backends. Give it a try with a GraphQL API!

clif gif

Run

npm install -g stepzen

stepzen login --public

mkdir gql && cd gql

stepzen import graphql
Enter fullscreen mode Exit fullscreen mode

And enter

https://graphqldd.stepzen.net/api/dd1cf47f51ac830fe21dc00ec80cee65/__graphql
Enter fullscreen mode Exit fullscreen mode

when you’re prompted to enter your endpoint. You can hit ‘enter’ for the other prompts since you won’t need authentication or headers to walk through this example.

Et voila! Behold, your schema is downloaded.

Now, to deploy your API, run

stepzen start
Enter fullscreen mode Exit fullscreen mode

You can now query it at the localhost address provided, or consume it at the URL you’ve been provided as well.

Conclusion

We’ve covered three ways to increase your productivity when building a GraphQL API, whether you want to import an entire endpoint or only access some of its data, whether you’d like to convert a data source to GraphQL using either a graphic user interface or a command-line interface. We hope you find these ways of speeding up your development process useful!

Now, sometimes developers trade speed of development for maintainability in the long run. We’d like to note that with StepZen, you don’t have to make that tradeoff. If you sign up for an account, you’ll be able to create a fully protected backend, whether with JWT or API keys, or both. We also have a >99.99% uptime. We are happy to take care of these details so you don’t have to sacrifice your strategic solidity for tactical concerns.

If you’d like to learn more about why you’d choose StepZen, visit our Why StepZen page.

You can also

  • Check out StepZen docs
  • pre-built SaaS APIs in the GraphQL Studio.
  • We're always keen to see what you're building and answer any questions on Discord!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay