当前位置: 首页 > 软件库 > 数据库相关 > >

fullstack-graphql

授权协议 MIT License
开发语言 C/C++
所属分类 数据库相关
软件类型 开源软件
地区 不详
投 递 者 钮鸿煊
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

  • List thoughts
  • Add thought
  • Delete thought
  • View single thought

▶️ Running

  • Clone repo git clone git@github.com: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

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:NodeJSReactJSGraphQL

Reddit:NodeJSReactJSGraphQL

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)

  • 最开始的时候是计算机软、硬件都需要懂,这时候的程序员叫电子科学家。 后来软硬件分离,但是仍然要对硬件精通,这时候的程序员叫计算机科学家。 软件飞速发展,软件成为一个单独的门类,这时候的程序员才叫程序员,也就是软件开发。 最开始时需要对数据库,对UI开发都要会。一个人需要会所有的技术。 随着浏览器的发展和分工的细化,开始有前端、后端区分。前端(浏览器端和手机端)专注于画面的展示,后端专注于业务逻辑。

  • 目录 Grahql 要点 定义数据类型 type XXX example: type Book { id: ID title: String author: Author // 自定义类型 summary:String isbn: Int test: Boolean } 定义查询 api type Query example: type

 相关资料
  • Fullstack GraphQL Boilerplates for React & Node.js Bootstrap your fullstack GraphQL app within seconds GraphQL boilerplates provide the perfect foundation for your GraphQL server, no matter if you're

  • A complete, serverless, full-stack application built on AWS Lambda, AWS HTTP API, Express.js, React and DynamoDB. Live Demo: https://www.serverless-fullstack-app.com Quick Start Install the latest ver

  • Vue fullstack template This project's goal is to help people create a reactive, realtime and user friendly backend system. �� Vue version This template only support vue2, because it use ElementUI as t

  • Apollo tutorial This is the fullstack app for the Apollo tutorial. �� File structure The app is split out into two folders: start: Starting point for the tutorial final: Final version From within the

  • Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It comes with many modern technologies; Relay, GraphQL,

  • Motivation ⭐ Setting up boiler plates when starting new projects is tedious sometimes and I often found myself setting it up from scratch �� Hence I made this starterkit following some of the best pat