Example: Using an @hasmany in AWS Amplify with React NextJS

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)
    } else {
      console.log("Creating user")

  // 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) {
    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 }))



1 thought on “Example: Using an @hasmany in AWS Amplify with React NextJS”

  1. Thanks so much for the example! I got a little stuck on “userToDoItemsOwner”. Where does that syntax come from? I thought owner was reserved for the DBs owner ID, so I was also surprised that you set it to username. Is that an override?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.