DEV Community: MD ARIFUL HASAN

Filter and Result (AWS Amplify, AppSync, GraphQL)

MD ARIFUL HASAN — Mon, 18 Jul 2022 04:37:08 +0000

In this post, we'll try to understand how to search/filter and result work in AWS Amplify and AppSync.

Prerequisites:

1/ GraphQL Learn
2/ Data modeling
If you don't know about data modeling check out my previous blog about data-modeling

If you've no idea about any prerequisites, I recommend learning them highly.

Directives

@modal @auth @hasOne @hasMany @manyToMany @searchable @primaryKey @index

@searchable

Needs to setup ElasticSearch (We'll not do this in this post)
Active search and sorting at the same time.

other directives

I've briefly described other directives in the data-modeling blog. If you don't know about other directives click here to learn.

Data Types

Scalar type: id, name, date_of_birth, got_job, gpa etc. (which has scalar value like ID, String, Float, Int, Boolean, AWSDate etc.)

Object type: Status, Student ( which is a javascript object)

Supported Search Operations

Data Type	Supported operations
String	ne, eq, match, matchPhrase, matchPhrasePrefix, multiMatch, exists, wildcard, regexp
Int	ne, gt, lt, gte, lte, eq, range
Float	ne, gt, lt, gte, lte, eq, range
Boolean	ne, eq
Enum	ne, eq, match, matchPhrase, matchPhrasePrefix, multiMatch, exists, wildcard, regexp
Object	not supported

ne (not equal), eq (equal), gt (greater than), lt (lesser than), gte (greater than or equal), lte (lesser than or equal)

Without `@searchable` directive

We can do filter with or without @searchable directive.We'll get filter argument for every list resolvers like (listStudents, listStatuses etc.)

Go to the DOCS or Documentation Explorer, and now search for the list resolver name you want to apply the filter. Click on any list resolver you want to apply filter. Here we're clicking on the liststudents resolver to apply the filter.

Inside listStudents we get the filter argument. Click on the filter argument to see what conditions we can apply to filter out data.

Inside filter argument, we can see multiple fields that can use to filter out data. If we pay attention to argument fields, we see that all the filter options are available only for the scalar field. No object fields are available like status

Dummy data for testing:

We've created some data to test filtering. If you don't know how to add a document/data in database or how hasOne, hasMany, manyToMany relation works, I suggest you to check out the data-modeling blog. Now we'll apply filter on this below data



{

  "data": {

    "listStudents": {

      "items": [

        {

          "id": "9f928a7a-f096-4ad8-b0cc-5b354dde6b18",

          "name": "Raisa",

          "email": "raisa@gmail.com",

          "gpa": 3.7,

          "got_job": true,

          "statusID": "b3a4a939-50ed-4d3c-a21e-8048834391f5",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1998-07-17",

          "exam_completed": 2

        },

        {

          "id": "31092e63-e421-4bbc-afe8-f2092e309442",

          "name": "Ashim",

          "email": "ashim@gmail.com",

          "gpa": 3.2,

          "got_job": false,

          "statusID": "2cc614a4-0bd1-4a8d-80a8-bc0c8372788b",

          "status": {

            "is_enrolled": false,

            "is_passed": true

          },

          "date_of_birth": "1998-04-15",

          "exam_completed": 3

        },

        {

          "id": "9a3a92df-e4be-4258-ae02-502e0bfd3745",

          "name": "Hasan",

          "email": "hasan@gmail.com",

          "gpa": 3.4,

          "got_job": false,

          "statusID": "840a91da-75ce-4cd5-8a41-58081763a933",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1998-03-22",

          "exam_completed": 1

        },

        {

          "id": "ff173ed6-5749-4a54-903b-025675f828e5",

          "name": "Minhaj",

          "email": "minhaj@gmail.com",

          "gpa": 3.7,

          "got_job": true,

          "statusID": "e1f9ccc1-132f-443a-9f37-821ed634cfc1",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1998-04-21",

          "exam_completed": 3

        },

        {

          "id": "bc70feab-da91-4ba5-a626-ee99c9f4c4a0",

          "name": "Totul",

          "email": "totul@gmail.com",

          "gpa": 3.4,

          "got_job": false,

          "statusID": "ca9064ff-5c2f-4634-8dca-d12f10acd1db",

          "status": {

            "is_enrolled": false,

            "is_passed": true

          },

          "date_of_birth": "1998-03-29",

          "exam_completed": 1

        },

        {

          "id": "514b1115-7c95-4037-884f-4d5eae58dc4b",

          "name": "Mahadhi",

          "email": "mahadhi@gmail.com",

          "gpa": 3.6,

          "got_job": true,

          "statusID": "ec2d4c20-4022-4084-9d52-19ec2cd18503",

          "status": {

            "is_enrolled": false,

            "is_passed": true

          },

          "date_of_birth": "1993-07-21",

          "exam_completed": 4

        },

        {

          "id": "7054f363-3f3c-4343-9dff-f7e4491a797f",

          "name": "Shuvo",

          "email": "shuvo@gmail.com",

          "gpa": 2.5,

          "got_job": false,

          "statusID": "1958dea4-59b4-4766-b725-476747b8b4c3",

          "status": {

            "is_enrolled": false,

            "is_passed": true

          },

          "date_of_birth": "1998-02-15",

          "exam_completed": 2

        },

        {

          "id": "bf74457b-a1e4-4715-880f-1425bedaaa09",

          "name": "Ayesha",

          "email": "ayesha@gmail.com",

          "gpa": 3.5,

          "got_job": false,

          "statusID": "3a86016e-b0d6-479f-a1d1-1effa0846457",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1998-07-17",

          "exam_completed": 2

        },

        {

          "id": "a2e5e97d-5f8d-493e-ba78-1701ca08d58e",

          "name": "Arif",

          "email": "arif@gmail.com",

          "gpa": 3.51,

          "got_job": true,

          "statusID": "840a91da-75ce-4cd5-8a41-58081763a933",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1998-03-27",

          "exam_completed": 1

        },

        {

          "id": "485b3f5a-8709-4902-82a6-4997c6a0839a",

          "name": "Navin",

          "email": "navin@gmail.com",

          "gpa": 3.4,

          "got_job": false,

          "statusID": "0e437cee-92f6-418a-bf90-af74a67a9943",

          "status": {

            "is_enrolled": true,

            "is_passed": false

          },

          "date_of_birth": "1993-06-24",

          "exam_completed": 3

        }

      ]

    }

  }

}

Using of filter argument: Filtering students by got_job

got_job{ eq: $job }: Go to the documentation explorer and click on the **got_job field, we'll see some conditions with types like (eq: Boolean, ne: Boolean, etc.)

$job: Boolean: Specify the input value type because we can only match with boolean data according to eq: Boolean

Using of filter argument: Filtering students by gpa

gpa{ ge: $point }: Go to the documentation explorer and click on the gpa field, we'll see some conditions with types like (ne: Float, ge: Float, eq: Float, etc.) We're using ge condition and its value is Float. That's why we've to take the float value

$point: Float: Specify the input value type because we can only match with float number according to ge: Float

Using of nested filter argument: Filtering students by gpa and got_job

Here we can use and / or / not operations. By default, and operation is applied on the query.

got_job : {eq: $job}, {exam_completed: {le: $exam}}: Data will show when got_job and exam_completed both satisfy conditions

Using of nested filter argument: Filtering students by got_job and exam_completed/email

got_job : {eq: $job}, or: [{exam_completed: {gt: $exam}}, {email: {eq: $email}}]: Data will show when got_job and exam_completed/email both satisfy conditions.

Using of limit & nextToken argument: Limiting data for pagination

$limit: Int:

The limit argument takes an Integer value and gives a certain amount of data.

Here we're providing the limit value 2. So the query will return a maximum of 2 documents/data.

$token: String:

The nextToken argument takes a String value and gives the upcoming documents/data.

Here we're providing an empty string in the argument because we need all data available in the first.

We're also getting a nextToken string from the query field that will provide us with the upcoming data. If the nextToken value is null, that means we've no data left.

$limit: Int:

Here we're providing the limit value 2. So the query will return a maximum of 2 documents/data.

$token: String:

Get the nextToken string from the previous query and provide it in the nextToken argument field to get upcoming documents/data.

We're also getting a new nextToken string from the query field that will provide us with the upcoming data.

Using of filter & limit & nextToken arguments:

We've already described all the conditions briefly, so now we will only visualize/understand the process.
Step-1| nextToken: "":
If the nextToken is an empty string, the limit process will start from 1st item/element.

Step-2| limit: 2:
The limit process will select 1st & 2nd item/element.

Step-3| filter: condition:
The filter process will check the 1st & 2nd item/element. If the filter condition satisfy, we will get the matched element. Here the condition matches with one element.

Step-1| nextToken: "":
If we provide a nextToken which we got from the previous query. The limit process will start from the upcoming item. Here the upcoming item starts from 3rd item/element.

Step-2| limit: 2:
The limit process will select 3rd & 4th item/element.

Step-3| filter: condition:
The filter process will check the 3rd & 4th item/element. If the filter condition satisfy, we will get the matched element. Here the condition matches with both elements.

Que: Here we are filtering data based on the student scalar field. What if we want to filter data based on student status (student object field)?

Solution:

Step-1: The connection between the Student model and the Status model is hasOne relation. We've to create a bi-directional relationship between the Student model and the Status model to get the Student data inside the Status model. If you don't understand relations between different models, check out this blog or feel free to comment below.
Step-2: We've created a bi-directional relationship between both models. But if we don't update documents one by one, we'll get a null value. To get the student data inside the status table, we've to update every status providing status id in $id field and student id in $student_id field.
Step-3: Get filtered data of enrolled students.

With `@searchable` directive

By adding @searchable we get some extra operations

aggregation values, such as sum, average, min, max terms
retrieve total search result count
sort the search results across one or multiple fields

To work the @searchable directive properly, we've to setup OpenSearch, and that's for another blog

That's it for now. Thanks for your patience. If this blog help you please give a react.

Data Modeling (AWS amplify, AppSync, GraphQL)

MD ARIFUL HASAN — Fri, 17 Jun 2022 09:03:40 +0000

Before going to the data modeling we need to create the graphQL API.
Go to the link to create the graphQL API
This may looks time consuming. But if you're new to Data Modeling give it a shot. You're basic will be far more then clear.

Before start creating schema we've to know about some directives we're going to use while creating graphQL schema. And if don't have any idea about what GraphQL is then get some basic about GraphQl

Directives

@model @auth @hasOne @hasMany @belongTo @manyToMany @searchable @primaryKey and @index ....

@model

Store objects in DynamoDB
Configure CRUD resolvers

@auth

API authorization strategies

@hasOne, @hasMany, @manyToMany, @belongsTo

Create relationships between @model object types

@searchable

Active search and sorting at the same time from database.

@primaryKey, @index

Override default key property with custom data

Data Modeling

Now we're going to setup database tables using API(GraphQL)

Data types

Scalar type: title, content (Contains scalar value like ID, String, Int, Float, DateTime etc.)

Object type: Todo (which is a JavaScript Object)

Without @model directive, we'll not get any CRUD resolvers

1. `@model`

By adding @model directive we will get all the CRUD resolvers

Resolvers	Description
getTodo	Get one todo document using `id` or `primaryKey`
listTodo	Get all todo documents
createTodo	Insert one todo document
updateTodo	Update one todo document using `id` or `primaryKey`
deleteTodo	Delete one todo document using `id` or `primaryKey`

2. `@auth`

By adding @auth directive we will get the permission to use CRUD resolvers. Otherwise we might get an error about unauthorization.

createTodo, updateTodo, deleteTodo To create, update & delete a document in DB, we've to start the query with mutation

createTodo

id: id is auto generated

title: title comes from input object title field

content: content comes from input object content field

getTodo, listTodo To get a document or all documents, the best practice is to start the query with query

getTodo

id: Provide id to get a document from DB.

title, content data will come from DB

listTodos

id: Don't need id to get data

title, content & other propertise will come from DB

deleteTodo

id: Provide id to delete match document

whole document object will delete from DB

3. `@index`

By using secondary index or @index directive we can create another extra queryField

To use todoByTitleAndRank we've to provide title as argument in the query field
To use todoByRank we've to provide rank as argument in the query field

Setup relationships between models

Directive	Data flow	Relationship	Example
`@hasOne`	One-directional	one-to-one	A project "has one" team
`@hasMany`	One-directional	one-to-many	A post "has many" comments
`@belongsTo`	Bi-directional	one-to-one or one-to-many	A project has one team or a team belongs to a project
`@ManyToMany`	Bi-directional	many-to-many	A blog has many tags and a tag has many blogs

4. `@hasOne`

One-directional : We'll get child object inside of a parent object. Below here Child object is Team and Parent object is Project
One-to-one : We'll get only one child inside of a parent object.

createTeam

teamName: Provide team name

createProject

projectName: Provide project name

projectTeamId: Provide the exact same id of Team. This default field will be created and matched with the team id field & get the team data. We can override this field.

listProjects

Team data will be found if projectTeamId === team.id.

We'll get team data inside of project.

But if we try to get project data inside of team it'll give us an error.

@hasOne(fields: ["fieldName"])

This will override the default field (projectTeamId) by fieldName (teamID). We will not find the default field again.

Now instead of matching projectTeamId === team.id, it is matching teamID === team.id.

5. `@hasMany`

One-directional : We'll get array of child objects inside of a parent object. Below here Child object is Comment and Parent object is Post
One-to-many : We'll get one or more child inside of a parent object.

createPost

postName: Provide post title

createComment

commentContent: Provide comment string

postCommentsId: Provide the exact same id of Post. This default field will be created and matched with the Post id field & get the comment data. We can override this field.

Adding another comment

listPosts

Comments will be found if postCommentsId === post.id

We'll get array of comment inside of post.

But if we try to get post data inside of comments it'll give us an error.

@hasMany(indexName: "byPost", fields: ["id"]) postID: ID! @index(name: "byPost", sortKeyFields: ["content"]

This will override the default field (postCommentsId) by property of index (postID). We will not find the default field again.

Adding post

Adding comment 1

postID: Provide the exact same id of Post. This field will override the postCommentsId field and match the Post id field & get the comment data.

Adding comment 2

Now instead of matching postCommentsId === post.id, it is matching postID === post.id.

6. `@belongsTo`

Bi-directional : We'll get array of child objects inside of a parent object & we'll also get parent inside of. Below here Child object is Comment and Parent object is Post
Difference

Directive	Can be found child data inside parent object	Can be found parent data inside child object
`@hasOne`	Yes	No
`@hasMany`	Yes	No
`@belongsTo`	Yes	Yes

I'm explaining @belongsTo directive for @hasMany relation. You should try out @belongsTo directive for @hasOne relation. There is no change in creating @hasOne and @hasMany schema and data table.Just we will find parent data inside of a child object.

createPost

Provide postName

createComment

Creating relation between two table by postCommentsId

Add comment 2

listPost

Getting child (comments) data inside parent (post) object

Getting parent (post) data inside child (comments) object

@hasMany(indexName: "byPost", fields: ["id"]) postID: ID! @index(name: "byPost")

This will override the default field (postCommentsId) by property of index (postID). We will not find the default field again. createPost

Provide postName

createComment

postID: Provide the exact same id of Post. This field will override the postCommentsId field and match the Post id field & get the comment data.

Adding comment 2

listPost

Getting child (comments) data inside parent (post) object

Getting parent (post) data inside child (comments) object

7. `@manyToMany`

This relation will create 3 data table.

Table	get	list	create	update	delete	subscription	Found Data Object
`Post`	Yes	Yes	Yes	Yes	Yes	Yes	Post, Tag, PostTags
`Tag`	Yes	Yes	Yes	Yes	Yes	Yes	Post, Tag, PostTags
`PostTags`	Yes	Yes	Yes	Yes	Yes	Yes	Post, Tag, PostTags

Bi-directional : We'll get one table inside of another table.

createPost

postName: Provide post name to create a post.

create Tag

label: Provide label title to create a tag label.

createPostTags
postID: Use to provide post object.
tagID: Use to provide tag object.

Advanced

Create multiple relationships between multiple model

Relations between models are

Department has one manager and many employees
Manager has one department and many employees
Employees has one department and one manager

createDepartment

Provide Department name in the departmentName input

We don't have manager and employee id. So we'll update the department later.

createManager

Provide manager name in the managerName input

Provide department id in the departmentID input.

createEmployee

Provide employee name in the employeeName input

Provide department id in the departmentID input.

Provide manager id in the managerID input.

And we're getting department and manager info in the Employee table

updateDepartment

Provide selected department id in the id input

Provide manager id in the managerID input

and we're getting employee and manager info in department table.

listManagers

And we're getting department and employee info in manager table.

That's it for now. Thanks for your patience. If this blog help you please give a react.
Next blog will be about filtering...

Single and multiple images upload and remove from Cloudinary using Node JS, Multer, MongoDB

MD ARIFUL HASAN — Wed, 23 Feb 2022 07:30:02 +0000

This system is working without using the file system of node. And I'm also using Thunder client (VS Code extension) for sending request, but you can also use Postman.

First create an ordinary Node JS application.

This is my folder structure and package.json file. I will be using these packages to do the work.

Go to Cloudinary and create a free account. After creating an account, you will find CLOUDINARY_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET in your account dashboard.

1# .env file
=> This file will contain all of the secret you don't want to show others

2# cloudinary.js file
=> Connects your application to cloudinary. Remember to use dotenv

3# cloudinaryAccountStorage.js file
=> This file will create a seperate folder to store all of your images in Cloudinary.

4# people.js file
=> People schema and people model for mongoose to store data in DB.

5# message.js file
=> Message schema and message model for mongoose to store data in DB.

6# server.js file
=> Every file is connected here. Remember to import and use dotenv.

7# uploadRouter.js file
=> Main routing file of this application. Send different request to different path.

8# imageUploader.js file
=> Universal image uploader file. Maximum file size, maximum file number, file type, and validation can control using this function.

9# avatarUpload.js file
=> Sending params to imageUploader.js for file size, file number and file type with error message. Most of the tutorial uses upload.single(), upload.array(), upload.fields() but I'm using upload.any()() to give you some idea how it works

10# attachmentUpload.js file
=> Sending params to imageUploader.js for file size, file number and file type with error message. Most of the tutorial uses upload.single(), upload.array(), upload.fields() but I'm using upload.any()() to give you some idea how it works

11# uploadController.js file
=> Structure and async function name of controller function. This file control upload and remove images from Cloudinary. It also sends json data to database.

11.1# addUser function of uploadController.js
=> Upload single image to Cloudinary and send public_id, secure_url to database of cloudinary upload.

Result of addUser function

11.2# deleteUser function of uploadController.js
=> Remove single image from Cloudinary also remove from database.

Result of deleteUser function

11.3# sendMessage function of uploadController.js
=> Upload multiple images to Cloudinary and send public_id, secure_url to database as an object of different cloudinary upload.

Result of sendMessage function

11.4# removeMsgAndAttachments function of uploadController.js
=> Remove multiple images from Cloudinary also remove from database.

Result of removeMsgAndAttachments function

Git repo of this code.
Thank you all.

DEV Community: MD ARIFUL HASAN

Filter and Result (AWS Amplify, AppSync, GraphQL)

Prerequisites:

Directives

Data Types

Supported Search Operations

Without @searchable directive

Dummy data for testing:

Using of filter argument: Filtering students by got_job

Using of filter argument: Filtering students by gpa

Using of nested filter argument: Filtering students by gpa and got_job

Using of nested filter argument: Filtering students by got_job and exam_completed/email

Using of limit & nextToken argument: Limiting data for pagination

Using of filter & limit & nextToken arguments:

Que: Here we are filtering data based on the student scalar field. What if we want to filter data based on student status (student object field)?

Solution:

With @searchable directive

Data Modeling (AWS amplify, AppSync, GraphQL)

Directives

Data Modeling

1. @model

2. @auth

3. @index

Setup relationships between models

4. @hasOne

5. @hasMany

6. @belongsTo

7. @manyToMany

Advanced

Single and multiple images upload and remove from Cloudinary using Node JS, Multer, MongoDB

Without `@searchable` directive

With `@searchable` directive

1. `@model`

2. `@auth`

3. `@index`

4. `@hasOne`

5. `@hasMany`

6. `@belongsTo`

7. `@manyToMany`