Creating basic queries (JavaScript)

Sign in to the Amazon Web Services Management Console and open the AppSync console.

1. In the APIs dashboard, choose your GraphQL API.

2. In the Sidebar, choose Schema.

Enter the details of your schema and data source. See the Designing your schema and Attaching a data source sections for more information.

Next to the Schema editor, There's a window called Resolvers. This box contains a list of the types and fields as defined in your Schema window. You can attach resolvers to fields. You will most likely be attaching resolvers to your field operations. In this section, we'll look at simple query configurations. Under the Query type, choose Attach next to your query's field.

On the Attach resolver page, under Resolver type, you can choose between pipeline or unit resolvers. For more information about these types, see Resolvers. This guide will make use of pipeline resolvers.

For Resolver runtime, choose APPSYNC_JS to enable the JavaScript runtime.

You can enable caching for this API. We recommend turning this feature off for now. Choose Create.

On the Edit resolver page, there's a code editor called Resolver code that allows you to implement the logic for the resolver handler and response (before and after steps). For more information, see the JavaScript resolvers overview.

import {util} from '@aws-appsync/utils';

export function request(ctx) {
    return {};
}

export function response(ctx) {
    return ctx.prev.result;
}

Below this section, there's a table called Functions. Functions allow you to implement code that can be reused across multiple resolvers. Instead of constantly rewriting or copying code, you can store the source code as a function to be added to a resolver whenever you need it.

Functions make up the bulk of a pipeline's operation list. When using multiple functions in a resolver, you set the order of the functions, and they will be run in that order sequentially. They are executed after the request function runs and before the response function begins.

To add a new function, under Functions, choose Add function, then Create new function. Alternatively, you may see a Create function button to choose instead.

1. Choose a data source. This will be the data source on which the resolver acts.

   Note

   In our example, we're attaching a resolver for getPost, which retrieves a Post object by id. Let's assume we already set up a DynamoDB table for this schema. Its partition key is set to the id and is empty.

2. Enter a Function name.

3. Under Function code, you'll need to implement the function's behavior. This might be confusing, but each function will have its own local request and response handler. The request runs, then the data source invocation is made to handle the request, then the data source response is processed by the response handler. The result is stored in the context object. Afterward, the next function in the list will run or will be passed to the after step response handler if it's the last one.

   Note

   In our example, we're attaching a resolver to getPost, which gets a list of Post objects from the data source. Our request function will request the data from our table, the table will pass its response to the context (ctx), then the response will return the result in the context. Amazon AppSync's strength lies in its interconnectedness with other Amazon services. Because we're using DynamoDB, we have a suite of operations to simplify things like this. We have some boilerplate examples for other data source types as well.

   Our code will look like this:

   import { util } from '@aws-appsync/utils';
   
   /**
    * Performs a scan on the dynamodb data source
    */
   export function request(ctx) {
     return { operation: 'Scan' };
   }
   
   /**
    * return a list of scanned post items
    */
   export function response(ctx) {
     return ctx.result.items;
   }

   In this step, we added two functions:

   • request: The request handler performs the retrieval operation against the data source. The argument contains the context object (ctx), or some data that is available to all resolvers performing a particular operation. For example, it might contain authorization data, the field names being resolved, etc. The return statement performs a Scan operation (see here for examples). Because we're working with DynamoDB, we're allowed to use some of the operations from that service. The scan performs a basic fetch of all items in our table. The result of this operation is stored in the context object as a result container before being passed to the response handler. The request is run before the response in the pipeline.

   • response: The response handler that returns the output of the request. The argument is the updated context object, and the return statement is ctx.prev.result. At this point in the guide, you may not be familiar with this value. ctx refers to the context object. prev refers to the previous operation in the pipeline, which was our request. The result contains the result(s) of the resolver as it moves through the pipeline. If you put it all together, ctx.prev.result is returning the result of the last operation performed, which was the request handler.

4. Choose Create after you're done.

Back on the resolver screen, under Functions, choose the Add function drop-down and add your function to your functions list.

Choose Save to update the resolver.

Sign in to the Amazon Web Services Management Console and open the AppSync console.

1. In the APIs dashboard, choose your GraphQL API.

2. In the Sidebar, choose Schema.

Under the Resolvers section and the Mutation type, choose Attach next to your field.

On the Attach resolver page, under Resolver type, choose pipeline resolvers. As a reminder, you can find more information about resolvers here. For Resolver runtime, choose APPSYNC_JS to enable the JavaScript runtime.

You can enable caching for this API. We recommend turning this feature off for now. Choose Create.

Choose Add function, then choose Create new function. Alternatively, you may see a Create function button to choose instead.

1. Choose your data source. This should be the source whose data you will manipulate with the mutation.

2. Enter a Function name.

3. Under Function code, you'll need to implement the function's behavior. This is a mutation, so the request will ideally perform some state-changing operation on the invoked data source. The result will be processed by the response function.

   Note

   createPost is adding, or "putting", a new Post in the table with our parameters as the data. We could add something like this:

   import { util } from '@aws-appsync/utils';
   
   /**
    * Sends a request to `put` an item in the DynamoDB data source
    */
   export function request(ctx) {
     return {
       operation: 'PutItem',
       key: util.dynamodb.toMapValues({id: util.autoId()}),
       attributeValues: util.dynamodb.toMapValues(ctx.args.input),
     };
   }
   
   /**
    * returns the result of the `put` operation
    */
   export function response(ctx) {
     return ctx.result;
   }

   In this step, we also added request and response functions:

   • request: The request handler accepts the context as the argument. The request handler return statement performs a PutItem command, which is a built-in DynamoDB operation (see here or here for examples). The PutItem command adds a Post object to our DynamoDB table by taking the partition key value (automatically generated by util.autoid()) and attributes from the context argument input (these are the values we will pass in our request). The key is the id and attributes are the date and title field arguments. They're both preformatted through the util.dynamodb.toMapValues helper to work with the DynamoDB table.

   • response: The response accepts the updated context and returns the result of the request handler.

4. Choose Create after you're done.

Back on the resolver screen, under Functions, choose the Add function drop-down and add your function to your functions list.

Choose Save to update the resolver.