[TRACKING] Nested stack runtime-config.json properties

[mmuller88]

Describe the bug

For my startup-ish prototype project based on CDK and Projen, I like to use Amplify AppSync. Kenneth Winner did a nice construct around it a while back https://www.npmjs.com/package/cdk-appsync-transformer . Unlucky the AppSync is wrapped in a nested stack. So when I take an output from that nested stack I can't use it for the runtime-config.json.

For completion, I don't use the StaticWebsite directly. I found that runtimeOptions part very inspiring so, I incorporated it into my project. But yeah it is fairly simple so you should have the same problem in your amazing construct.

Expected Behavior

No error is thrown.

Current Behavior

An error is thrown like:

failed: Error [ValidationError]: Template error: instance of Fn::GetAtt references undefined resource apiC8550315

Reproduction Steps

const nestedStack = new core.NestedStack(this, 'appsync-nested-stack');
const app = new appsync.GraphqlApi(nestedStack, 'api', { name: 'blub' });

const dashboard = new StaticWebsite(this, 'dashboard', {
  ...,
  runtimeOptions: {
    jsonPayload: {
      // appSyncGraphqlEndpoint: appSyncTransformer.appsyncAPI.graphqlUrl,
      appSyncGraphqlEndpoint: app.graphqlUrl,
    },
  },
});

Possible Solution

No response

Additional Information/Context

No response

PDK version used

0.0.0

What languages are you seeing this issue on?

Typescript

Environment details (OS name and version, etc.)

MacOs

[agdimech]

Hi Martin!

Thanks for raising this issue and I am glad you are enjoying the PDK :)

I had a quick look and it appears that this is actually caused by a limitation of the BucketDeployment construct, vended by the CDK. There is an open issue relating to the fact that this is currently not supported: aws/aws-cdk#19257

There is a workaround that could be done as follows:

1.) In the stack where you instantiate the StaticWebsite, create a SSM Parameter with the value you want to pass in to the jsonPayload of the runtimeConfig.
2.) In the runtimeConfig, pass in a reference to the resolved parameter which is a stack-local reference.

Here is some sample code which I have tested and can confirm resolves the issue:

export class ParentStack extends Stack {
  constructor(scope: Construct, id: string, props: StackProps = {}) {
    super(scope, id, props);

    const nestedStack = new NestedStack(this, 'NestedStack');
    const userIdentity = new UserIdentity(nestedStack, 'UserIdentity');
    const userPoolId = new StringParameter(this, 'UserPoolId', {
      parameterName: 'UserPoolId',
      stringValue: userIdentity.userPool.userPoolId,
    });
    const userPoolClientId = new StringParameter(this, 'UserPoolClientId', {
      parameterName: 'UserPoolClientId',
      stringValue: userIdentity.userPoolClient?.userPoolClientId || '',
    });
    const identityPoolId = new StringParameter(this, 'IdentityPoolId', {
      parameterName: 'IdentityPoolId',
      stringValue: userIdentity.identityPool.identityPoolId,
    });
    new StaticWebsite(this, 'StaticWebsite', {
      websiteContentPath: path.join(__dirname, 'website'),
      runtimeOptions: {
        jsonPayload: {
          region: Stack.of(this).region,
          identityPoolId: identityPoolId.stringValue,
          userPoolId: userPoolId.stringValue,
          userPoolWebClientId: userPoolClientId.stringValue,
        },
      },
    });
  }
}

I have changed this issue to a TRACKING issue as there are no changes to be implemented on the PDK side. I hope this resolves your issue :)

[agdimech]

In regard to the Appsync construct - we have plans to vend a Declarative AppSync construct in the future, similar to the OpenApiGateway construct. The plan would be for you to just define your data model, mutations, queries, etc and the construct will handle all the wiring to lambdas, resolvers (including pipelined ones), validations, etc.

[mmuller88]

In regard to the Appsync construct - we have plans to vend a Declarative AppSync construct in the future, similar to the OpenApiGateway construct. The plan would be for you to just define your data model, mutations, queries, etc and the construct will handle all the wiring to lambdas, resolvers (including pipelined ones), validations, etc.

Yep, I thought that will be on your roadmap as this fits perfectly into prototype-ish. Looking forward to the AppSync construct :)

Thanks for looking into this :).

I can confirm the workaround works.