All Projects â†’ atulmy â†’ Fullstack Graphql

atulmy / Fullstack Graphql

Licence: mit
🌈 Simple Fullstack GraphQL Application. API built with Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with React + Redux to access the API. Written in ES6 using Babel + Webpack.

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects

Projects that are alternatives of or similar to Fullstack Graphql

Altair
✨⚡️ A beautiful feature-rich GraphQL Client for all platforms.
Stars: ✭ 3,827 (+300.73%)
Mutual labels:  graphql, graphql-server, database, graphql-client
36 Graphql Concepts
📜 36 concepts every GraphQL developer should know.
Stars: ✭ 209 (-78.12%)
Mutual labels:  graphql, graphql-server, graphql-schema, graphql-client
fullstack-graphql-angular
Simple Fullstack GraphQL Application with Angular CLI + Redux. API built with Typescript + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with Angular CLI + Redux + Async Middleware to access the API.
Stars: ✭ 67 (-92.98%)
Mutual labels:  graphql-client, expressjs, graphql-server, graphql-schema
Hotchocolate
Welcome to the home of the Hot Chocolate GraphQL server for .NET, the Strawberry Shake GraphQL client for .NET and Banana Cake Pop the awesome Monaco based GraphQL IDE.
Stars: ✭ 3,009 (+215.08%)
Mutual labels:  graphql, graphql-server, graphql-schema, graphql-client
Graphjin
GraphJin - Build APIs in 5 minutes with GraphQL. An instant GraphQL to SQL compiler.
Stars: ✭ 1,264 (+32.36%)
Mutual labels:  graphql, graphql-server, database, mysql
Gramps Legacy
The core data source combination engine of GrAMPS.
Stars: ✭ 198 (-79.27%)
Mutual labels:  graphql, graphql-server, graphql-schema
Graphql Rest Proxy
Turn your REST API into GraphQL - A Proxy Server that pipes request from GraphQL to REST with GraphQL DSL, performant nested children, mutations, input types, and more.
Stars: ✭ 218 (-77.17%)
Mutual labels:  graphql, graphql-server, expressjs
Graphqlize
A Clojure & JVM library for developing GraphQL API instantly from Postgres and MySQL databases
Stars: ✭ 240 (-74.87%)
Mutual labels:  graphql, graphql-server, mysql
relay-compiler-plus
Custom relay compiler which supports persisted queries
Stars: ✭ 68 (-92.88%)
Mutual labels:  graphql-client, graphql-server, graphql-schema
Morpheus Graphql
Haskell GraphQL Api, Client and Tools
Stars: ✭ 285 (-70.16%)
Mutual labels:  graphql, graphql-server, graphql-client
Dgraph
Native GraphQL Database with graph backend
Stars: ✭ 17,127 (+1693.4%)
Mutual labels:  graphql, graphql-server, database
Graphql Cost Analysis
A Graphql query cost analyzer.
Stars: ✭ 527 (-44.82%)
Mutual labels:  graphql, graphql-server, graphql-schema
V8 Archive
Directus Database API — Wraps Custom SQL Databases with a REST/GraphQL API
Stars: ✭ 486 (-49.11%)
Mutual labels:  graphql, database, mysql
Pup
The Ultimate Boilerplate for Products.
Stars: ✭ 563 (-41.05%)
Mutual labels:  graphql, graphql-server, graphql-client
Gqlify
[NOT MAINTAINED]An API integration framework using GraphQL
Stars: ✭ 182 (-80.94%)
Mutual labels:  graphql, graphql-server, graphql-client
Graphql2rest
GraphQL to REST converter: automatically generate a RESTful API from your existing GraphQL API
Stars: ✭ 181 (-81.05%)
Mutual labels:  graphql, graphql-server, graphql-schema
Eliasdb
EliasDB a graph-based database.
Stars: ✭ 611 (-36.02%)
Mutual labels:  graphql, graphql-server, database
Apollo Server
🌍  Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
Stars: ✭ 12,145 (+1171.73%)
Mutual labels:  graphql, graphql-server, graphql-schema
Space Cloud
Open source Firebase + Heroku to develop, scale and secure serverless apps on Kubernetes
Stars: ✭ 3,323 (+247.96%)
Mutual labels:  graphql, database, mysql
Typegql
Create GraphQL schema with TypeScript classes.
Stars: ✭ 415 (-56.54%)
Mutual labels:  graphql, graphql-server, graphql-schema

fullstack-graphql

Fullstack GraphQL

Simple Demo Application

API built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL).

WebApp built with React + Redux.

Written in ES6 using Babel + Webpack.

📝 Features

  • [x] List thoughts
  • [x] Add thought
  • [x] Delete thought
  • [x] View single thought

▶️ Running

  • Clone repo git clone [email protected]:atulmy/fullstack-graphql.git fullstack-graphql
  • Install NPM modules API cd api and npm install
  • Install NPM modules Webapp cd web and npm install
  • Modify /api/src/config/database.json for database credentials
  • Modify /api/src/config/config.json for API port (optional)
  • Modify /web/.env for web port (optional)
  • Run API cd api and npm start, browse GraphiQL at http://localhost:8000/
  • Run Webapp cd web and npm start, browse web at http://localhost:3000/

Sample API logs

[nodemon] starting `babel-node src/index.js --presets es2015,stage-2`
SETUP - Connecting database...
SETUP - Loading modules...
SETUP - GraphQL...
SETUP - Syncing database tables...
INFO - Database connected.
INFO - Database sync complete.
SETUP - Starting server...
INFO - Server started on port 3000.

📸 Screenshots

screenshot

Video: MOV

🏗 Core Structure

fullstack-graphql
  ├── api (api.example.com)
  │   ├── src
  │   │   ├── config
  │   │   ├── models
  │   │   ├── schema
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   └── package.json
  │
  ├── web (example.com)
  │   ├── public
  │   ├── src
  │   │   ├── components
  │   │   ├── setup
  │   │   └── index.js
  │   │
  │   ├── .env
  │   └── package.json
  │
  ├── .gitignore
  └── README.md

📘 Guides

API

  • Adding new Module (Eg: Users):
    • Copy /api/src/models/thought.js to /api/src/models/user.js and modify the file for table name and respective fields
    • Add an entry to the models object in /api/src/models/index.js
    • Copy /api/src/schema/thoughts to /api/src/schema/users and modify type.js, resolvers.js and fields/query.js and fields/mutations.js
    • Import /api/src/schema/users/fields/query.js in /api/src/schema/query.js
    • Import /api/src/schema/users/fields/mutations.js in /api/src/schema/mutations.js

Webapp

  • Adding new Module (Eg: Users):
    • Create folder users under /web/src/components/
    • Create your Container and Resusable components under /web/src/components/users
    • Create api folder under /web/src/components/users
    • Add actions.js where all your Redux Action Types and Actions will reside (refer /web/src/components/thoughts/api/actions.js)
    • Add state.js where all your respective Reducers will recide (refer /web/src/components/thoughts/api/state.js)
    • Import the module state in /web/src/setup/store.js to make it avaliable to the app
    • Encapsulate all your User related code in /web/src/components/users
  • Adding new Route (Eg: /users):
    • Add a new entry to routes object in /web/src/setup/routes.js (eg user: { list: '/list' })
    • Edit /web/src/components/App.js and add the route entry

Sample GraphQL Queries

These queries are generated on client side using queryBuilder() helper defined in /web/src/setup/helpers.js

Query - Get List

query {
  thoughts {
    id,
    name,
    thought
  }
}
                

Response

{
  "data": {
    "thoughts": [
      {
        "id": 1,
        "name": "Arya Stark",
        "thought": "A girl has no name"
      },
      {
        "id": 2,
        "name": "Jon Snow",
        "thought": "I know nothing"
      }
    ]
  }
}
                

Query - Get by Param

query {
  thought(id: 1) {
    id,
    name,
    thought
  }
}
                

Response

{
  "data": {
    "thought": {
      "id": 1,
      "name": "Arya",
      "thought": "A girl has no name"
    }
  }
}
                

Mutation - Create

mutation {
  thoughtCreate(
    name: "Tyrion Lannister", 
    thought:"I drink and I know things"
  ) {
    id
  }
}
                

Response

{
  "data": {
    "thoughtCreate": {
      "id": 3
    }
  }
}
                

Mutation - Remove

mutation {
  thoughtRemove(id: 3) {
    id
  }
}
                

Response

{
  "data": {
    "thoughtRemove": {
      "id": null
    }
  }
}
                

💬 Community Reviews

Facebook Groups: NodeJS • ReactJS • GraphQL

Reddit: NodeJS • ReactJS • GraphQL

⭐ Showcase

Following projects have been built with or inspired from fullstack-graphql

  • Crate - Get monthly subscription of trendy clothes and accessories - GitHub
  • HIRESMART - Application to streamline hiring process - GitHub
  • Would really appreciate if you add your project to this list by sending a PR

Resources

🎩 Authors

👏 Donate

If you liked this project, please donate to support it ❤️

Donate via PayPal

📜 License

Copyright (c) 2017-18 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].