AWS::Appsync:Resolver Cloudformation error using Javascript Resolver in Code block in YML using Serverless Framework

I am having an issue while creating AWS::Appsync:Resolver Cloudformation in Serverless Framework using Javascript resolver.

My Javascript Resolver code in root dir /src/resolvers/jsResolver.js which I have attached to AWS::AppSync::Resolver cloudformation in code block. I have also installed npm plugin for appsync utils in my package.json

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

 export function request(ctx) {
    const {source, args} = ctx
    return {
    operation: 'Invoke',
    payload: { field: ctx, arguments: args, source },
  };
}

export function response(ctx) {
    util.error("Failed to fetch relatedPosts", "LambdaFailure", ctx.prev.result)
    return ctx.result;
  }

My AWS::AppSync::Resolver Cloudformation is below in YML file also I have used Code as its Mandatory if I have declared it as APPSYNC_JS Runtime

AppSyncJsResolver:
  Type: AWS::AppSync::Resolver 
  Properties:
    ApiId: !GettAtt Graphql.APiId
    Kind: PIPELINE
    Code: ./src/resolvers/jsResolver.js <—- Here my code is breaking up with error contains one or more error
    TypeName: Query
    FieldName: getInfo
    Runtime:
      Name: APPSYNC_JS
      RuntimeVersion: 1.0.0
    PipelineConfig:
      Functions:
        - !GetAtt AppSyncFunction.FunctionId 

I have tried above code as per AWS Cloudformation documentation for Appsync available where they have mentioned that in AWS::AppSync::Resolver for creating Javascript Resolver using Cloudformation as below one of the properties. which I have included in my AWS::AppSync::Resolver

Code  
  The resolver code that contains the request and response functions. When code is 
  used, the runtime is required. The runtime value must be APPSYNC_JS.

Required: No

Type: String

Required: No

Type: String

So I've tried this and cant find enough solutions regarding Javascript Resolvers all are available with VTL template specific.

With above code my CloudFormation build failed with the following error: An error occurred: AppSyncJSResolver- The code contains one or more errors. (Service: AWSAppSync; Status Code: 400; Error Code: BadRequestException; Request ID: 0245d64d-...; Proxy: null)

• AppSyncJSResolver- which is my AWS::AppSync::Resolver in above code. and I have code property in that which giving me an error. I have verified with multiple sources and I am not finding any errors with my Javascript Resolver file /src/resolvers/jsResolver.js which I have declared in AppSyncJSResolver AWS::AppSync::Resolver in code property, I am not sure why I’m getting this error, any help would be great.

To answering my own question, The way I resolve it via two ways.

1. We can write whole Resolver code in YML Cloudformation in Code property like below. Make sure your resolver code should be inside of your Code property and use "|" special character (Multi-line code) after Code property.

AppSyncJsResolver:
  Type: AWS::AppSync::Resolver 
  Properties:
    ApiId: !GettAtt Graphql.APiId
    Kind: PIPELINE
    Code: | 
         import { util } from '@aws-appsync/utils';
         export function request(ctx) {
         const {source, args} = ctx
         return {
         operation: 'Invoke',
         payload: { field: ctx, arguments: args, source },
        };
        }
        export function response(ctx) {
        util.error("Failed to fetch relatedPosts", "LambdaFailure",ctx.prev.result)
        return ctx.result;
        }
    TypeName: Query
    FieldName: getInfo
    Runtime:
      Name: APPSYNC_JS
      RuntimeVersion: 1.0.0
    PipelineConfig:
      Functions:
        - !GetAtt AppSyncFunction.FunctionId

2. If you want to keep your business logic out of YML file and keep it separate then you can use CodeS3Location property in your javascript resolver like below.

first create bucket in S3 and store your javascript resolver file with your resolver code in bucket. make sure you give enough IAM permission to your appsync to access your S3 bucket.

After above step you can rewrite your YML Cloudformation like below

AppSyncJsResolver:
  Type: AWS::AppSync::Resolver 
  Properties:
    ApiId: !GettAtt Graphql.APiId
    Kind: PIPELINE
    CodeS3Location:s3://my-bucket-name/my-filename.js
    TypeName: Query
    FieldName: getInfo
    Runtime:
      Name: APPSYNC_JS
      RuntimeVersion: 1.0.0
    PipelineConfig:
      Functions:
        - !GetAtt AppSyncFunction.FunctionId

Hope this help others and will contribute more about Javascript Resolver so it will be easier for other to find more complex solutions and get as much as resources about Javascript Resolver. Thanks to @Graham Hesketh for your suggestions.