This repo is part of a fullstack application. The backend can be found here.
Using a NextJS app with the AWS Amplify JavaScript libraries, we can hook into AWS resources. This frontend demonstrates hooking into an AppSync API that is protected with the an API Key.
// replace with your own keys
Amplify.configure({
aws_project_region: 'us-east-1',
aws_appsync_graphqlEndpoint:
'https://c4wds3boinhrdemdnqkt5uztny.appsync-api.us-east-1.amazonaws.com/graphql',
aws_appsync_region: 'us-east-1',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: 'da2-ze45yo5nm5dttnnsvkyoxwbbvq',
})
In addition to configuring our frontend, the Amplify libraries also provide several ways to call our backend depending on how much or little we want our frontend to make use of Amplify:
//alternatively, run the following commands in your terminal:
// 1. npm i -g @aws-amplify/cli -g
// 2. amplify init -y
// 3. amplify add codegen --apiId YOUR-API-ID 😎
const fetchUsersQuery = `
query ListUsers($limit: Int, $nextToken: String) {
listUsers(limit: $limit, nextToken: $nextToken) {
items {
userId
firstname
lastname
picture
}
nextToken
}
}
Note the nextToken
field. This will return a token if there are more users available. This is how pagination is done in GraphQL.
For styling the [AWS Amplify UI library])(https://ui.docs.amplify.aws/) is used to create the following page when the application is run with npm run dev
:
- AWS blog post: Secure AWS AppSync with API Keys using the AWS CDK