DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Norris Chebl
Norris Chebl

Posted on

Modeling Relationships - Join Table - GraphQL - AWS Amplify - AppSync - React

Goal

Join 2 tables in a GraphQL schema.

If you are using AWS Amplify and AppSync with a GraphQL API and have experienced some difficulty with modeling your relationships, this is a very simple method to connect your tables.

Creating the GraphQL API

Use this simple command:

amplify add api
Enter fullscreen mode Exit fullscreen mode

For more detailed steps with creating your GraphQL API, check out the AWS Amplify docs.

Tables

First, let's create our the two tables we'd like to join:

Playlist:

type Playlist @model {
  id: ID!
  name: String!
  description: String!
  owner: String
  createdAt: String
}
Enter fullscreen mode Exit fullscreen mode

Post:

type Post @model {
  id: ID!
  name: String!
  description: String!
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
}
Enter fullscreen mode Exit fullscreen mode

Relationships

A Playlist has many posts.
A Post can belong to many playlists.

We must create two 1:Many relationships which will help us achieve the Many:Many relationship we need to join playlists and posts.

Let's now create the necessary 1:Many relationships with connections in each table:

Playlist:

type Playlist @model {
  id: ID!
  name: String!
  description: String!
  owner: String
  createdAt: String
  posts: [PlaylistPost] @connection(name: "PlaylistPost")
}
Enter fullscreen mode Exit fullscreen mode

Post:

type Post @model {
  id: ID!
  name: String!
  description: String!
  thumbnail: S3Object!
  video: S3Object!
  owner: String
  createdAt: String
  playlists: [PlaylistPost] @connection(name: "PostPlaylist")
}
Enter fullscreen mode Exit fullscreen mode

The Join Table

We can reference these connections with a third table (remember to reference these connections with the same name):

type PlaylistPost @model {
  id: ID!
  createdAt: String
  playlist: Playlist @connection(name: "PlaylistPost")
  post: Post @connection(name: "PostPlaylist", sortField: "updatedAt")
}
Enter fullscreen mode Exit fullscreen mode

Deploy your API (this could take a few minutes):

amplify push
Enter fullscreen mode Exit fullscreen mode

Configure Your Application

Install the required AWS Amplify package.

npm install aws-amplify
Enter fullscreen mode Exit fullscreen mode

Import your AWS Amplify files in App.js:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Enter fullscreen mode Exit fullscreen mode

Now we have access to all GraphQL query, mutation and subscription operations.

Adding a Post to a Playlist

Now that we have our two tables joined by the PlaylistPost table, we can add a post to a playlist by simple creating a new PlaylistPost.

AWS Amplify has built-in API and GraphQL functions you can use by importing them from aws-amplify. I highly recommend reading the AWS Amplify docs.

import { API, graphqlOperation } from 'aws-amplify'
import { createPlaylistPost } from '../graphql/mutations'
Enter fullscreen mode Exit fullscreen mode
const add = async (playlist, post) => {
  try {
     // Specify the id of the post
     // and the playlist you want to add that post to
      const newPlaylistPostInput = {
          playlistPostsPlaylistId: playlist.id,
          playlistPostsPostId: post.id
      }
      const updatedPost = await API.graphql(graphqlOperation(createPlaylistPost, { newPlaylistPostInput }))

  } catch(err) {
      console.log(err)
  }
}
Enter fullscreen mode Exit fullscreen mode

Removing a Post from a Playlist:

import { API, graphqlOperation } from 'aws-amplify'
import { deletePlaylistPost } from '../graphql/mutations'
Enter fullscreen mode Exit fullscreen mode
const remove = async (selectedItem) => {
  try {
     // Specify the id of the PlaylistPost you want to delete
      const input = {
                id: selectedItem.id,
            }
            const removed = await API.graphql(graphqlOperation(deletePlaylistPost, { input }))
      }
  } catch(err) {
      console.log(err)
  }
}
Enter fullscreen mode Exit fullscreen mode

You Did It!

You have successfully created a join table in your GraphQL schema as well as used AWS Amplify GraphQL operations to connect a post to a playlist. Now you can use these same steps to join other tables with similar relationships.

Note: For more guidance, I definitely suggest (for the 4th time) to read through the AWS Amplify documentation.

Top comments (2)

Collapse
 
nxtra profile image
Nxtra

Ty for the interesting article! Should we explicitly specify the PlaylistPost type in the schema? Isn't this going to be created by default when we set the connectionName in both Playlist and Post?

Collapse
 
djom202 profile image
Jonathan Olier

Thanks for the article, However you should explain how to get all of them in the relationship table.

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt β€” available in multiple colors.