Exercise 8: Connect meetup group mutations

Now that you have your GraphQL backend, you'll need to add some data to it. You can start with a few mutations and queries directly in AWS Web Console. But eventually you want to connect your frontend app with your GraphQL backend.

Task

Connect CreateMeetupGroup, UpdateMeetupGroup (optional, view not done), and deleteMeetup mutations with your React application.

Hints

• Amplify and AppSync generated following mutations for your Meetup model:

  mutation CreateMeetupGroup($input: CreateMeetupGroupInput!)
  mutation UpdateMeetupGroup($input: UpdateMeetupGroupInput!)
  mutation DeleteMeetupGroup($input: DeleteMeetupGroupInput!)
  mutation CreateEvent($input: CreateEventInput!)
  mutation UpdateEvent($input: UpdateEventInput!)
  mutation DeleteEvent($input: DeleteEventInput!)
  mutation CreateAttendee($input: CreateAttendeeInput!)
  mutation UpdateAttendee($input: UpdateAttendeeInput!)
  mutation DeleteAttendee($input: DeleteAttendeeInput!)
  

• You can see the details for all mutations in AWS Web Console. Navigate to AppSync (here's a direct link: link), select your AppSync project (it should be named meetup or something similar) and select "Schema" from the menu on the right.
• You can use the following line to import React libs that allows you to talk to your GraphQL backend:

  import { API, graphqlOperation } from 'aws-amplify';
  

  and this for importing mutations:

  import { createMeetupGroup } from '../graphql/mutations'
  

• See the documentation for more examples: https://aws-amplify.github.io/docs/js/api#mutations.

import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createMeetupGroup } from '../graphql/mutations';

// Mutation
const meetupDetails = {
  name: 'JS Belgrade',
  description: 'JS Belgrade is JavaScript User Group from Belgrade. Our goal is to connect Belgrade\'s JavaScript community through monthly meetups.'
};

const newMeetup = await API.graphql(graphqlOperation(createMeetupGroup, {input: meetupDetails}));
console.log(newMeetup);

const newMeetup = await API.graphql(graphqlOperation(CreateMeetupGroup, {input: meetupDetails}));