DEV Community

loading...
Cover image for Prototyping Queries in AWS AppSync

Prototyping Queries in AWS AppSync

thebenforce profile image Ben Force Originally published at justwriteapps.com on ・2 min read

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
}

Enter fullscreen mode Exit fullscreen mode

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"
    });

Enter fullscreen mode Exit fullscreen mode

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)
}

Enter fullscreen mode Exit fullscreen mode

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}"
})

Enter fullscreen mode Exit fullscreen mode

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"))
    });

Enter fullscreen mode Exit fullscreen mode

Testing

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

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

Enter fullscreen mode Exit fullscreen mode

You should get back

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

Enter fullscreen mode Exit fullscreen mode

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/cdk/api/latest/docs/aws-appsync-readme.html

Backdrop photo by Photo by Sigmund on Unsplash

Discussion (0)

pic
Editor guide