Here is an example of how to use an @hasmany relationship in AWS Amplify with React. I am attempting to create a user and then associate many ToDo items to this user. I have created a model for the user and a model for the ToDo item with a graphql schema. I associate the ToDo Item to the User with an @hasMany. All of this is done while using authentication.
The Code for an @hasmany relationship in AWS Amplify with React NextJS
Graphql schema
Notice that I am assigning authentication to the owner.
I have each Cognito user create and manager their own user model
A cognito user can manage their own friends, which get read access to their User info
Auth is passed through the @hasmany to the ToDoItem
# https://docs.amplify.aws/cli-legacy/graphql-transformer/auth/#multiple-authorization-rules
type User @model
@auth(rules: [
{ allow: owner },
{ allow: owner, ownerField: "friends", operations: [read] }
]) {
owner: String! @primaryKey
friends: [String]
ToDoItems: [ToDoItem] @hasMany
}
# https://docs.amplify.aws/cli/graphql/data-modeling/#configure-a-secondary-index
type ToDoItem @model
@auth(rules: [
{ allow: owner },
]) {
id: ID!
title: String!
description: String!
}
React Code
Here are the functions I am using in react to fetch the user, create the user, and create the ToDo items.
// Fetch the user, if there is no user for signed in user then create a new one
async function fetchUser() {
console.log("Fetching user")
const apiData = await API.graphql({ query: getUser, variables: { owner: user.username } });
if (apiData.data.getUser !== undefined ) {
const userFromAPI = apiData.data.getUser;
console.log("Found user: ", userFromAPI)
setUserModel(userFromAPI);
} else {
console.log("Creating user")
createUser();
}
}
// Create new user with hardcoded friend for testing purposes
async function createUser() {
const data = {
owner: user.username,
friends: ['test2'],
};
await API.graphql({
query: createUserMutation,
variables: { input: data },
});
fetchUser(); //ToDo: Move to then
}
// Create a new ToDo item assigned to the signed in user
async function createToDo(event) {
event.preventDefault();
const form = new FormData(event.target);
const data = {
name: form.get("name"),
description: form.get("description"),
userToDoItemsOwner: user.username
};
await API.graphql(graphqlOperation(createToDoMutation, { input: dataToDo }))
fetchUser();
event.target.reset();
}