Consuming the Deepgram API: The GraphQL Edit
Tags: graphql, api, webdev, tooling
Published: 2022-06-10 19:11:27


In this project, we’ll explore how to use Deepgram, StepZen, and Next.js to convert the Deepgram REST API into your own GraphQL API, translate audio to English and French text, and display the result in a user interface.

- [Deepgram’s REST API](https://developers.deepgram.com/api-reference/) - A speech-to-text API built on a 100% deep learning platform. It offers up to 90% translation accuracy with model training with no human validation necessary. I chose to write about it because the developer experience is excellent; should you want to extend the capabilities of this API further, you’ll find exactly what you need in Deepgram’s [docs and tutorials](https://developers.deepgram.com/).
- StepZen’s [REST2GraphQL](https://rest2graphql.io/) tool - A user interface designed to convert your REST APIs to GraphQL, no code necessary. StepZen introspects the endpoint, generates a schema, and deploys your GraphQL endpoint once you hit ‘Generate’. These endpoints are public and are available for you to use and share for 30 days. To take the schema you’ve created with REST2GraphQL and create a private, scalable endpoint for it, [sign up for a StepZen account](https://stepzen.com/signup).
- Next.js - A React framework providing features like [Server Side Rendering](https://nextjs.org/docs/basic-features/pages). We’ll use it in this tutorial to fetch the data from our GraphQL endpoint. That way, you’ll learn how to safely send an API key on a server-side request.

## Converting the Deepgram REST API to GraphQL

The first thing we’ll learn is how to use REST2GraphQL to convert Deepgram to a GraphQL API.

Access the tool at [rest2graphql.io](http://rest2graphql.io)

Then, select ‘POST’ and enter the Deepgram ‘listen’ endpoint we’ll be using:

![rest2graphql http method selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/renkxnx4k66n84mssqfj.png)
 

Next, you’ll add some query parameters.

Deepgram uses these parameters to determine the language to translate, the model to use, and whether to punctuate the text. They are sent to StepZen on ‘Generate’,  and StepZen creates a GraphQL schema with query variables matching these parameters.

![rest2graphql params selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frzca3tvac5mi4u5qdaj.png)
 

You’ll also need to add your Deepgram API key under the **Headers** tab to get access to your Deepgram endpoint. You can find the steps to create a Deepgram API key in the [Deepgram docs](https://developers.deepgram.com/documentation/getting-started/authentication/#create-an-api-key).

![rest2graphql headers selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uum555z5mx5d4y8w7uk0.png)
 

Now, click **Generate**, and your endpoint is deployed! Query it in the browser with GraphiQL, or customize the values of your request’s variables with the ‘Query Arguments’ widget.

![screenshot of deployed endpoint in interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt4qkugju5irgzcr00df.png)
 

## Consuming the GraphQL API in a Next.js App

Next, let’s look at how to consume your GraphQL endpoint in a Next.js app. I’ll show snippets to illustrate my steps, so here’s the [Github repository](https://github.com/stepzen-dev/stepzen-deepgram-next-sample) if you’d like to clone the entire code.

I started by [creating a Next.js app](https://nextjs.org/docs/api-reference/create-next-app). Then, I created a `getServerSideProps` function to feed the data into the Home component, inside `pages/index.js` .

```jsx
export async function getServerSideProps(context) {

}

export default function Home(props) {
    return (
        <div className={styles.container}>
            <Head>
                <title>Create Next App</title>
                <meta
                    name="description"

ETC...
```

I wrote my fetch call inside the `getServerSideProps` function. called the endpoint generated by REST2GraphQL, `https://public6ddcc5208696d858.stepzen.net/api/deepgram/__graphql`, sent the headers required by the Deepgram API, and sent my GraphQL query as the body (you can check out the [generated JavaScript boilerplate](https://rest2graphql.io/response?hash=7b7f6f7873372f38387b7f6f7873216e6f6f7a6d786b675b7f6f78732f38322f383e6b7f7e62657863706b7e6365642f394b21597e7863646d2f383b2f3849212f383e666b646d7f6b6d6f2f394b21597e7863646d2f3849212f383e67656e6f662f394b21597e7863646d2f3849212f383e7a7f64697e7f6b7e6f2f394b21597e7863646d2f3849212f383e7f78662f394b21597e7863646d2f38332f3d482f3f49646e6f6f7a6d786b675b7f6f78732f38326b7f7e62657863706b7e6365642f394b212f383e6b7f7e62657863706b7e6365642f384921666b646d7f6b6d6f2f394b212f383e666b646d7f6b6d6f2f38492167656e6f662f394b212f383e67656e6f662f3849217a7f64697e7f6b7e6f2f394b212f383e7a7f64697e7f6b7e6f2f3849217f78662f394b212f383e7f78662f38332f3d48676f7e6b6e6b7e6b2f3d4869626b64646f66792f384969786f6b7e6f6e2f38496e7f786b7e6365642f384967656e6f66792f3849786f7b7f6f797e55636e2f384979626b383f3c2f38497e786b64796b697e63656455616f732f3d4e2f3d4e2f3f49642f3d4e2f38382c6f646e7a6563647e37627e7e7a792f394b2f384c2f384c7a7f686663693c6e6e69693f383a323c333c6e323f3224797e6f7a706f6424646f7e2f384c6b7a632f384c6e6f6f7a6d786b672f384c55556d786b7a627b66) to see the query that I copied).

I protected the **apikey** by saving it in my `env.` file. For information about how to use the fetch API with GraphQL, view [StepZen’s documentation](https://stepzen.com/docs/using-graphql/making-queries-with-fetch).

```jsx
const apikey = process.env.DEEPGRAM_APIKEY

const res_in_en = await  fetch('https://public6ddcc5208696d858.stepzen.net/api/deepgram/__graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Token ${apikey}`,
  },
  body: JSON.stringify({
    query: `
    query deepgramQuery($authorization: String!, $language: String, $model: String, $punctuate: String, $url: String) {
        deepgramQuery(
          authorization: $authorization
          language: $language
          model: $model
          punctuate: $punctuate
          url: $url
        ) {
          results {
            channels {
              alternatives {
                confidence
                transcript
                words {
                  confidence
                  end
                  punctuated_word
                  start
                  word
                }
              }
            }
          }
        }
      }
      `,
    variables: {
        url: 'https://static.deepgram.com/examples/Bueller-Life-moves-pretty-fast.wav',
        language: 'en-US',
        model: 'general',
        punctuate: 'true',
        authorization: `Token ${process.env.DEEPGRAM_APIKEY}`
    },
  }),
})
```

After making the call in the function, we transform the result into JSON and return it as props:

```jsx
const en_data = await res_in_en.json()

    if (!en_data) {
        return {
            notFound: true,
        }
    }

    return {
        props: { en_data }, // will be passed to the page component as props
    }
```

Next, I surfaced the data text on the homepage by using the props passed from the `getServerSideProps` function to the `Home` component (something Next will do automatically here).

```jsx
<h1>DeepGram Samples</h1>
     <h2>English Sample</h2>
         <p>
           {
     props.en_data.data.deepgramQuery.results.channels[0].alternatives[0].transcript
            }
         </p>
```

After that, I can see it rendered in my [localhost](http://localhost) endpoint!

![screenshot of rendered English text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76sm79btfjz0ibkw82lc.png)
 

## French Sample

So now I’d created an English sample… how about another language? Deepgram has support for 18 languages! Let’s try French. The first thing is to repeat the 'Converting the Deepgram REST API to GraphQL' process outlined above, but with a ‘fr’ value for the language parameter rather than ‘en-US’.

I also used a French sample hosted at [`https://www.lightbulblanguages.co.uk/resources/audio/quelageastu.mp3`](https://www.lightbulblanguages.co.uk/resources/audio/quelageastu.mp3). I then created a similar query and passed the result of it to `props` as well. You can see my final version in the [Github repository](https://github.com/stepzen-dev/stepzen-deepgram-next-sample), or give it a go on your own!

![screenshot of rendered french text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp63bhl6fx4n8gqlx1s9.png)
 

## Where to Go From Here

In this post, you learned how to convert Deepgram’s API to GraphQL with StepZen, then consume it in a Next.js app. To learn more about these technologies:

- [StepZen documentation](/docs/quick-start)
- [StepZen blog](/blog/)
- [Deepgram blog]([https://deepgram.com/blog/](https://deepgram.com/blog/))
- [Next.js docs]([https://nextjs.org/docs/getting-started](https://nextjs.org/docs/getting-started))

We hope you enjoy building your own project with StepZen; please know we’d be happy to help you learn more! Jump into our [Discord server]([https://discord.com/invite/9k2VdPn2FR](https://discord.com/invite/9k2VdPn2FR)) to ask a question.