Exercise 6: Add and setup GraphQL

You have many options to create a serverless API. For example, you can use Amplify to add a RESTful API to your app (and then again connect it to the database or some other storage). But REST APIs are boring, most of the time. Fortunately, Amplify can help you with GraphQL!

Task

Add a GraphQL backend for your meetup app using Amplify.

Your schema could look similar to this one:

type MeetupGroup @model {
  id: ID!
  name: String!
  description: String
  location: String
  events: [Event] @connection(name: "MeetupEvents")
}
type Event @model {
  id: ID!
  title: String!
  description: String!
  date: String!
  startTime: String!
  endTime: String!
  image: String
  meetup: MeetupGroup @connection(name: "MeetupEvents")
  attendees: [Attendee] @connection(name: "EventAttendees")
}
type Attendee @model {
  id: ID!
  content: String
  event: Event @connection(name: "EventAttendees")
}

But feel free to experiment.

Don't forget to run the amplify push and amplify publish commands once you add a new category to Amplify.

Hints

See the docs for more details: https://aws-amplify.github.io/docs/js/api.
Amplify deploys GraphQL using AWS AppSync service, once you have a GraphQL created, you can test it in the AppSync section of AWS Web Console: https://eu-west-1.console.aws.amazon.com/appsync.
You can use API Key or Cognito User Pool (auth that you previously created) to protect your GraphQL endpoint.

Need more help?

To add GraphQL backend using Amplify, navigate to your React project backend in the terminal, and run the amplify add api command. This command will prompt you with a few questions. Here are the answers to all of these questions:

Please select from one of the below mentioned services: GraphQL
Provide API name: meetup
Choose an authorization type for the API: Amazon Cognito User Pool
Do you have an annotated GraphQL schema? N
Do you want a guided schema creation? Y
Select One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
Do you want to edit the schema now? Y

Edit your schema as defined in the task, go back to your terminal and hit enter. Then run the amplify push command to deploy the changes to the AWS.

During the push process, there will be a few more questions related to the code generation. Here are the answers:

Do you want to generate code for your newly created GraphQL API: Y
Choose the code generation language target: javascript
Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/*/.js): just hit enter for the default value
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Y
Enter maximum statement depth [increase from default if your schema is deeply nested]: 2

Few minutes later, you should have a fully working GraphQL schema! Command will print something similar to this:

GraphQL endpoint: https://abc123d4e5fghijklmnopqrstu.appsync-api.eu-central-1.amazonaws.com/graphql

Go to the AppSync in the AWS Web Console to test it: https://eu-central-1.console.aws.amazon.com/appsync.

7. Add and setup GraphQL

Exercise 6: Add and setup GraphQL

Task

Hints

results matching ""

No results matching ""