Todo-list Web Application made using NodeJS, Express, React, MySQL, GraphQL, Apollo-Client, Sequelize ORM, Here you can Add todo, Update, Delete and Strikethrough, All the data are stored in MySQL Database.
Install NodeJS
- Start Xampp - Apache and MySQL
- Goto http://localhost/phpmyadmin/
- Create database tododb
Install Todo list Server files
cd server/
npm install -g nodemon
npm install
nodemon server.jsInstall Todo list
cd todolist/
npm install
npm start
To run this project, you will need to add the following environment variables to your .env file
PROXY_PORT=4000
To use GraphiQL Developer Tool
- For getting all Data from tododb database
query{
msglist{
id,
jobtodo,
toggle
}
}
Get data of single ID
query{
msgDetail(id:1){
id,
jobtodo,
toggle
}
}
Get data of single ID by passing ID as query variable in JSON format
query($msgid:Int){
msgDetail(id:$msgid){
id,
jobtodo,
toggle
}
}
Passing ID as query variable in json format
{
"msgid": 1
}
2. To Create/Add Data
mutation{
msgCreate(jobtodo:"1st Data Added"){
jobtodo
}
}
To Create using query variable
mutation msgCreate($jobtodo: String!){
msgCreate(jobtodo:$jobtodo){
id,
jobtodo
}
}
Pass query variable
{
jobtodo:"New Msg Added"
}
3. To Update Data and show some message when the data is Updated
mutation{
msgUpdate(id:1, jobtodo:"1st Data Updated Modified"){
toggle,
message,
error
}
}
To Update using query variable
mutation msgUpdate($id: Int!, $jobtodo: String!){
msgUpdate(id:$id, jobtodo:$jobtodo){
toggle,
message,
error
}
}
Pass query variable
{
"id": 3,
"jobtodo": "3rd data Updated now"
}
4. To Delete Data on provided ID and show StatusType, some message etc.
mutation{
msgDelete(id:2){
toggle,
message,
error
}
}
To Delete using query variable
mutation msgDelete($id: Int!){
msgDelete(id:$id){
toggle,
message
}
}
Pass query variable
{
id: 21
}
5. Get Toggle Data and show some message when data is Updated
mutation{
msgToggle(id:1, toggle: 1){
toggle,
message,
error
}
}
To Toggle Update using query variable
mutation msgToggle($id: Int!, $toggle: Int!){
msgToggle(id:$id, toggle:$toggle){
id,
toggle
}
}
Pass query variable
{
"id": 1,
"toggle": 1
}
👤 Rajneesh Kumar
- GitHub: @ancod3r
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent