GraphQL with NodeJS project

GraphQL project with Mongo and SASS to handle some entities like Courses, Students or Monitors A client was implemented too into the client folder. this client handles a global search of any text found into entities

Run

backend

open inex.js in vscode and press F5 for debugging

or 

npm run dev

or

npm start // for production

frontend

1. run SASS Open a new terminal in client folder and run the following

cd client
npm run sass

if you get the following error:

• This usually happens because your environment has changed since running npm install.
• Run npm rebuild node-sass to download the binding for your current environment.

then you can try to rebuild sass

npm rebuild node-sass
npm run sass

2. bundle javascript files Open a new terminal in client folder and run the following

cd client
npm run bundle

3. load client/index.html using some Live Server

Screenshots

Some Example of Queries and Mutations supported

• Queries with Alias and Fragments

{
  AllCourses: getCourses {
    _id
    ...CourseFields
  }
  
  GraphQLCourse: getCourse(id: "639bbfd73cab3e6d46500fb0") {
    _id
    ...CourseFields
  }
  
  NodeCourse: getCourse(id: "639bbfd73cab3e6d46500fb1") {
    _id
    ...CourseFields
    teacher
  }
}

fragment CourseFields on Course{
  title
  description
  people {
    _id
    name
  }
}

Query a single course

{
  getCourse (id: "639bbfd73cab3e6d46500fb1") {
    _id
    title
    description
    people {
      _id
      name
    }
  }
}

Mutation with variables

mutation AddPersonToCourse($courseid: ID!, $personid: ID!)
{
	addPerson(courseId: $courseid, personId: $personid){
    _id
    title
    description
    people{
      name
    }
  }
}

Variables

{
  "courseid": "639bbfd73cab3e6d46500fb1",
  "personid": "639bd9e639b3cdc8712277c4"
}

Query Interfaces

Since Monitor and Students implements the interface Person then we can query them with specify properties that belongs to appropriate types, for instance, if the query will return a Person which is a Monitor then only for that the property phone will be shown. The same will occour for Student

{
 	getPeople{
    _id
    name
    email
    ... on Monitor{
      phone
    }
    ... on Student{
      alias
      avatar
    }
  }
}

Query with Directives

The code below will use the @include directive to add a condition is certain properties or fields should be shown or not

query getPeopleData($monitor: Boolean!, $avatar: Boolean!)
{
 	getPeople{
    _id
    name
    email
    ... on Monitor @include(if: $monitor)
    {
      phone
    }
    ... on Student @include(if: $avatar){
      avatar
      alias
    }
  }
}

variables

{
  "monitor": false,
  "avatar": false
}

Global Search query example

{
  searchItems(keyword: "nek"){
    __typename
    ... on Course{
      title
      description
    }
    ... on Monitor{
      name
      phone
    }
    ... on Student{
      name
      avatar
    }
  }
}