Search code examples
react-nativeaws-amplifyaws-appsync

How do you create a Mutation which has a Union as a field with AWS AppSync / DynamoDB (React Native)


I have worked out how to create a new user and write basic fields to DynamoDB like the name of the user (string) but I can't find a way to have a Union as one of the inputs.

In my example when the user registers I want to know what type of user is using the app: Either it will be a teach or a student (and the app will use this info to display different UI depending on the type of user)

I haven't found any examples of this so maybe it's impossible? Has anyone done this? Does anyone know if you can do it? Or maybe I shouldn't be trying to save this as a Union...

I am using react-native, AWS Amplify, AppSync, Cognito.

My schema:

type User
  id: ID!
  name: String!
  userTypes: [UserType]
}

union UserType = Teacher | Student

The code generated mutation:

const registerUser = `mutation RegisterUser($input: CreateUserInput!) {
  registerUser(input: $input) {
    id
    name
    createdAt
    updatedAt
    userTypes {
      ... on Teacher {
        id
        name
        subjectsTaught
      }
      ... on Student {
        id
        name
        lessons
      }
    }
  }
}
`;

Then the actual react native part:

try {
            await API.graphql(graphqlOperation(registerUser,
                { input: { name: "Tamsyn", userTypes: { Student } } } ));
                console.log('created user');
            } catch (err) {
                console.log('error creating user', err);
            }

Solution

  • I can use an enum like this:

    type User
      id: ID!
      name: String!
      userType: [UserType]
    }
    
    enum UserType {
      Teacher
      Student
    }
    

    And then when the user signs up I can call this if they select "Teacher":

    await API.graphql(graphqlOperation(createUser, { input: { name: name, userType: 'Teacher' } }));
    

    or if the user selects student I can call...

    await API.graphql(graphqlOperation(createUser, { input: { name: name, userType: 'Student' } }));
    

    And then when the user is in the app if I want to find out which profile to display:

       if (user.userType === 'Teacher') {
           navigation.navigate('TeacherProfile');
         } else if (user.userType === 'Student') {
           navigation.navigate('StudentProfile');
         }