Prototyping Queries in AWS AppSync
Tags: tutorial, webdev, productivity, aws
Published: 2021-04-13 12:34:53

---
title: Prototyping Queries in AWS AppSync
published: true
date: 2021-04-13 12:28:05 UTC
tags: tutorial,webdev,productivity,aws
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr50v1jcfc2c3otslzdt.png
canonical_url: https://justwriteapps.com/prototyping-queries-in-aws-appsync
---

Did you know there's a simple way to create mock responses for AWS AppSync queries? To accomplish this you just need to create the query, a special data source, and a resolver.

# Define the Query

To keep things simple, we're going to be prototyping the following graphql query.

```
type Query {
  foo(input: FooInput): FooOutput!
}

type FooOutput {
  bar: String!
}

input FooInput {
  value: Int
}

```

# Create the Data Source

We'll be using a special passthrough data source type, aptly named `NONE`. Here's all that's required to make it in CDK.

```
const prototypeDS = graphqlApi.addNoneDataSource(`prototypeDataSource`, {
      name: "Prototype",
      description: "Prototype graphql responses"
    });

```

# VTL Templates

The vtl request template is going to be the same for all of your prototype requests.

```
{
    "version": "2018-05-29",
    "payload": $util.toJson($ctx.args.input)
}

```

Finally, the fun part. We can define the response by modifying the content within `$util.Json` in the following template.

```
#set($value = $ctx.args.input.value)

$util.toJson({
  "bar": "You entered ${value}"
})

```

# Creating the Resolver

Now that we have a query, data source, and some vtl templates it's time to tie them all together with a resolver.

```
prototypeDS.createResolver({
      typeName: "Query",
      fieldName: "foo",
      requestMappingTemplate: appsync.MappingTemplate.fromFile(join(__dirname, "mapping-templates", "Query.foo.request.vtl")),
      responseMappingTemplate: appsync.MappingTemplate.fromFile(join(__dirname, "mapping-templates", "Query.foo.response.vtl"))
    });

```

# Testing

All that's left to do is deploy the stack and try out the new query

```
query {
  foo(input: { value: 12 }) {
    bar
  }
}

```

You should get back

```
{
  "data": {
    "foo": {
      "bar": "You entered 12"
    }
  }
}

```

# Summary

You've seen how to easily prototype responses to a query so that frontend developers can start working without waiting for the backend to be fully implemented. You can use this decoupling to allow your frontend and backend developers to work concurrently, or let the frontend devs start first so they can identify any issues with the query before wasting time on the backend.

* * *

# References

[https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-reference-none.html](https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-reference-none.html)

[https://docs.aws.amazon.com/cdk/api/latest/docs/aws-appsync-readme.html](https://docs.aws.amazon.com/cdk/api/latest/docs/aws-appsync-readme.html)

Backdrop photo by Photo by [Sigmund](https://unsplash.com/@sigmund?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/prototype?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)