Convert REST to GraphQL: A New Low-Code Approach
Tags: graphql, tutorial, showdev, api
Published: 2022-05-31 20:37:11


Today's API and app economy is built on REST. After a couple of decades of investment in REST, it's no surprise that most of the APIs that developers consume are REST. GraphQL is the relative newcomer. Its strengths are the ability to query everything you need and only what you need, and an improved developer experience supported by capabilities like self-documentation and query hinting. This landscape leaves savvy developers looking for ways to leverage GraphQL into a world where a lot of the data they need to build today's compelling experiences resides at REST API backends. So how to transform REST endpoints to GraphQL?


Transforming REST into GraphQL doesn't have to be an arduous task. You can already do so in a [few lines of code with StepZen](/getting-started?details=rest). And we've just made it even easier with a new [REST2GraphQL](https://rest2graphql.io/) conversion tool!

The [REST2GraphQL](https://rest2graphql.io/) tool requires no CLI download and no StepZen account. It lets you create a fully functional GraphQL API from your REST endpoint. Your GraphQL API is deployed right away and available to call from your app or command line. The GraphQL API is public and is running and available for 30 days at no cost to you. Share it, query it, build against it. At any time, take what you've built, make it a permanently deployed endpoint and easily customize it, by [signing up](/signup) for a free StepZen account.

## How to transform REST to GraphQL with one click

Paste your REST endpoint URL into the field in the [REST2GraphQL](https://rest2graphql.io/) web tool and click **Generate**. StepZen inspects your REST endpoint and generates the GraphQL API for you. Now the Endpoint field displays the GraphQL endpoint.

You can explore, test, and query the endpoint in the GraphiQL browser. Better still, you can build with your GraphQL API right away. You can even share it with your team and friends for them to build with it. You'll get code samples in a few languages that you can use to call the API. All in all you'll have a GraphQL API up and running in minutes.

![screenshot of user interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uekp67442u9pk0h0xtx.png)
 

## Start with REST endpoint - no query params, no headers

In its simplest mode, you can generate a GraphQL API by providing just the REST endpoint value. If you start with the example provided in the tool, you'll see the REST endpoint is [`https://jsonplaceholder.typicode.com/todos/1`](https://jsonplaceholder.typicode.com/todos/1). You can leave the Query Params, Header, and JSON fields blank, click **Generate** and see the GraphQL API generated for you, as well as cURL, JavaScript, and Python code you can use to call it.

## POST JSON Data

But what if we needed to post some JSON data? For this example, we'll use the httpbin sample API: [`https://httpbin.org/post`](https://httpbin.org/post)

First, select the POST method:

![tab with POST selected
 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3aaqoce0gwkm78wsejv.png)
 

Next, paste the JSON that you'd like to send and click **Generate**.

![tab with json entered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kr3wzp56qrnqlt7wazv.png)


Your GraphQL API is generated for you, its URL is provided in the Endpoint field: `https://publicb93954a786e9c842.stepzen.net/api/httpbin/__graphql`

On inspection of the JavaScript code example that we can use to query the GraphQL API, we can see that it generates a query with parameters for the JSON we need to send, `key1` and `key2`, evident in the `variables: {}` field.

```javascript
let headers = {};

headers["Content-Type"] = "application/json";

var graphql = JSON.stringify({
    query: "query httpbinQuery($key1: String, $key2: String){\n    httpbinQuery(key1: $key1, key2: $key2){\n        args\n        data\n        files\n        form\n        headers{\n            Accept\n            Host\n        }\n        json{\n            key1\n            key2\n        }\n        origin\n        url\n    }\n}",
    variables: {key1: String,key2: String}
})

var requestOptions = {
method: 'POST',
headers: headers,
body: graphql
};

fetch("https://publicb93954a786e9c842.stepzen.net/api/httpbin/__graphql", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
```

## Add a Query Parameter

Now, say we have an endpoint, [`https://ghibliapi.herokuapp.com/films?limit=1`](https://ghibliapi.herokuapp.com/films?limit=1), which takes the query parameter `limit`.

Enter the endpoint URL in the **Endpoint** field:

![screenshot of params tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lzdihv723o3555s5srg.png)
 

And enter the query params in the **Query Params** key and value fields

![screenshot of params tab with entered params](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx3jw5sp393aruzow9hq.png)
 

Click **Generate** and see that the query parameter is translated into your cURL request.

```bash
curl --request POST 'https://publicf1bf36ef9fe92aea.stepzen.net/api/ghibliapi/__graphql' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query ghibliapiQuery($limit: String){\n    ghibliapiQuery(limit: $limit){\n        description\n        director\n        id\n        image\n        locations\n        movie_banner\n        original_title\n        original_title_romanised\n        people\n        producer\n        release_date\n        rt_score\n        running_time\n        species\n        title\n        url\n        vehicles\n    }\n}","variables":{}}'
```
## Add a Path Parameter

To add a path parameter to your request, enter the path and value inside the path parameter tab.

Using the [https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1) REST endpoint as an example, the **Path Params** values are `/todos/$todo` and `1`.

![screenshot of tool path params page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac200ov7i9njbbe20k5e.png)
 

Examine the JavaScript, Python , and cURL examples generated for you to see how the path parameters are used.

![screenshot of boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrpfoko87m69ers95aqu.png)
 

## Wrapping it up

[REST2GraphQL](https://rest2graphql.io/) requires no CLI download and no StepZen account. You can create a fully functional GraphQL API from your REST endpoint. It is deployed right away and available to call from your app or command line. Your public endpoint is available for 30 days for you to use in your projects and share with others. If you'd like to have a permanent endpoint, want to extend and customize the one you create here, want to combine two REST endpoints in one GraphQL API, and more, [sign up](/signup) for a free account.

With your StepZen account, you can generate a GraphQL API for *any* REST, SQL, or NoSQL endpoint in a few minutes. You can  use StepZen's GraphQL directives [@rest](/docs/connecting-backends/how-to-connect-a-rest-service), [@dbquery](/docs/connecting-backends/how-to-connect-a-mysql-database), [@graphql](/docs/connecting-backends/how-to-connect-a-graphql-api), and [others](/docs/custom-graphql-directives/directives) to customize your GraphQL. See [Getting Started](/getting-started) to launch the quickstart.

We hope you [REST2GraphQL](https://rest2graphql.io/) useful. We'd love your feedback and suggestions and we're always keen to hear about the things you're building and answer any questions. Hope to see you over on [Discord](https://discord.gg/9k2VdPn2FR).