React JS + AWS Amplify with GraphQl pagination - Auth, API, Storage.
Delete the amplify folder and the aws-exports.js file.
If you never have worked with AWS Amplify.
After AWS Amplify configuration:
amplify init
Enter a name for the project bareauthstyled
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
...
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use: default
amplify add auth
Do you want to use the default authentication and security configur
ation? Default configuration
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Username
Do you want to configure advanced settings? No, I am done.
amplify add api
Please select from one of the below mentioned services: GraphQL
? Provide API name: flowpostsapi
? Choose the default authorization type for the API API key
? Enter a description for the API key: public
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API Yes, I want to make some additional changes.
? Configure additional auth types? Yes
? Choose the additional authorization types you want to configure for the API Amazon Cognito User Pool
Cognito UserPool configuration
Use a Cognito user pool configured as a part of this project.
? Enable conflict detection? No
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
Do you want to edit the schema now? Yes
Copy and paste Schema
type Post
@model
@auth(
rules: [
{ allow: owner, ownerField: "owner" }
{ allow: public, operations: [read] }
{ allow: private, operations: [read] }
]
) {
id: ID!
owner: String
relation: String
title: String!
text: String!
media: String!
createdAt: String
updatedAt: String
}
amplify add storage
? Please select from one of the below mentioned services: Content (Images, audio
, video, etc.)
? Please provide a friendly name for your resource that will be used to label th
is category in the project: flowposts
? Please provide bucket name: flowpostsdcde08605dc84af99efbbea229940b36
? Who should have access: Auth and guest users
? What kind of access do you want for Authenticated users? create/update, read,
delete
? What kind of access do you want for Guest users? read
? Do you want to add a Lambda Trigger for your S3 Bucket? No
amplify push
Category | Resource name | Operation | Provider plugin |
| -------- | ----------------- | --------- | ----------------- |
| Auth | flowposts07da9e87 | Create | awscloudformation |
| Api | flowpostsapi | Create | awscloudformation |
? Are you sure you want to continue? Yes
GraphQL schema compiled successfully.
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src graphql/*/.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.ts
yarn install
Happy hacking :)