├── server
    ├── .gitignore
    ├── images
    │   └── img 1.gif
    ├── package.json
    ├── userapp.sql
    └── index.js
└── client
    ├── public
        ├── favicon.ico
        ├── manifest.json
        └── index.html
    ├── src
        ├── App.css
        ├── index.js
        ├── Queries
        │   └── index.js
        └── App.js
    ├── .gitignore
    └── package.json


/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AvanthikaMeenakshi/graphqlReactBoilerplate/HEAD/client/public/favicon.ico


--------------------------------------------------------------------------------
/server/images/img 1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AvanthikaMeenakshi/graphqlReactBoilerplate/HEAD/server/images/img 1.gif


--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | .card {
 8 |   margin-bottom: 20px;
 9 |   margin-top: 20px;
10 | }
11 | 


--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import ApolloClient from 'apollo-boost';
 5 | import { ApolloProvider } from '@apollo/react-hooks';
 6 | import 'bootstrap/dist/css/bootstrap.min.css';
 7 | import './App.css';
 8 | 
 9 | const client = new ApolloClient({
10 |   uri: 'http://localhost:4000/graphql'
11 | });
12 | 
13 | ReactDOM.render(<ApolloProvider client={client}>
14 |   <App />
15 | </ApolloProvider>, document.getElementById('root'));
16 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "graphql-app",
 3 |   "version": "1.0.0",
 4 |   "description": "User consolidation apis",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "apollo-server-express": "^2.8.1",
13 |     "body-parser": "^1.19.0",
14 |     "cors": "^2.8.5",
15 |     "express": "^4.17.1",
16 |     "express-graphql": "^0.9.0",
17 |     "graphql": "^14.4.2",
18 |     "mongodb": "^3.3.0-beta2",
19 |     "mysql": "^2.17.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/client/src/Queries/index.js:
--------------------------------------------------------------------------------
 1 | import { gql } from 'apollo-boost';
 2 | 
 3 | export const GET_USERS = gql`
 4 |   {
 5 |     getUsers {
 6 |       id,
 7 |       name,
 8 |       job_title,
 9 |       email
10 |     }
11 |   }
12 | `;
13 | 
14 | export const VIEW_USERS = gql`
15 |   query ($id: Int){
16 |     getUserInfo(id: $id) {
17 |       id,
18 |       name,
19 |       job_title,
20 |       email
21 |     }
22 |   }
23 | `;
24 | 
25 | export const ADD_USER = gql`
26 |   mutation($name: String, $email: String, $job_title: String) {
27 |     createUser (name: $name, email: $email, job_title: $job_title)
28 |   }
29 | `;
30 | 
31 | export const EDIT_USER = gql`
32 |   mutation($id: Int, $name: String, $email: String, $job_title: String) {
33 |     updateUserInfo (id: $id, name: $name, email: $email, job_title: $job_title)
34 |   }
35 | `;
36 | 
37 | export const DELETE_USER = gql`
38 |   mutation($id: Int) {
39 |     deleteUser(id: $id)
40 |   }
41 | `
42 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@apollo/react-hooks": "^3.0.0",
 7 |     "apollo-boost": "^0.4.3",
 8 |     "bootstrap": "^4.3.1",
 9 |     "formik": "^1.5.8",
10 |     "graphql": "^14.4.2",
11 |     "react": "^16.8.6",
12 |     "react-dom": "^16.8.6",
13 |     "react-scripts": "3.0.1",
14 |     "reactstrap": "^8.0.1"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": "react-app"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useQuery } from '@apollo/react-hooks';
 3 | import { GET_USERS, VIEW_USERS } from "./Queries";
 4 | import { Card, CardBody, CardHeader, CardSubtitle, Spinner } from 'reactstrap';
 5 | 
 6 | function App() {
 7 |   const getAllUsers = useQuery(GET_USERS);
 8 |   const userInfo = useQuery(VIEW_USERS, { variables: { id: 1 }});
 9 |   if (getAllUsers.loading || userInfo.loading) return <Spinner color="dark" />;
10 |   if (getAllUsers.error || userInfo.error) return <React.Fragment>Error :(</React.Fragment>;
11 | 
12 |   return (
13 |     <div className="container">
14 |       <Card>
15 |         <CardHeader>Query - Displaying all data</CardHeader>
16 |         <CardBody>
17 |           <pre>
18 |             {JSON.stringify(getAllUsers.data, null, 2)}
19 |           </pre>
20 |         </CardBody>
21 |       </Card>
22 |       <Card>
23 |         <CardHeader>Query - Displaying data with args</CardHeader>
24 |         <CardBody>
25 |           <CardSubtitle>Viewing a user by id</CardSubtitle>
26 |           <pre>
27 |             {JSON.stringify(userInfo.data, null, 2)}
28 |           </pre>
29 |         </CardBody>
30 |       </Card>
31 |     </div>
32 |   )
33 | }
34 | 
35 | export default App;
36 | 


--------------------------------------------------------------------------------
/server/userapp.sql:
--------------------------------------------------------------------------------
 1 | -- phpMyAdmin SQL Dump
 2 | -- version 4.8.3
 3 | -- https://www.phpmyadmin.net/
 4 | --
 5 | -- Host: 127.0.0.1
 6 | -- Generation Time: Aug 04, 2019 at 08:08 PM
 7 | -- Server version: 10.1.36-MariaDB
 8 | -- PHP Version: 5.6.38
 9 | 
10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
11 | SET AUTOCOMMIT = 0;
12 | START TRANSACTION;
13 | SET time_zone = "+00:00";
14 | 
15 | 
16 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
17 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
18 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
19 | /*!40101 SET NAMES utf8mb4 */;
20 | 
21 | --
22 | -- Database: `userapp`
23 | --
24 | 
25 | -- --------------------------------------------------------
26 | 
27 | --
28 | -- Table structure for table `users`
29 | --
30 | 
31 | CREATE TABLE `users` (
32 |   `id` int(11) NOT NULL,
33 |   `name` varchar(255) NOT NULL,
34 |   `email` varchar(255) NOT NULL,
35 |   `job_title` varchar(255) NOT NULL
36 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
37 | 
38 | --
39 | -- Indexes for dumped tables
40 | --
41 | 
42 | --
43 | -- Indexes for table `users`
44 | --
45 | ALTER TABLE `users`
46 |   ADD PRIMARY KEY (`id`);
47 | 
48 | --
49 | -- AUTO_INCREMENT for dumped tables
50 | --
51 | 
52 | --
53 | -- AUTO_INCREMENT for table `users`
54 | --
55 | ALTER TABLE `users`
56 |   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
57 | COMMIT;
58 | 
59 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
60 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
61 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
62 | 


--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const graphqlHTTP = require('express-graphql');
 3 | const { buildSchema } = require('graphql');
 4 | const mysql = require('mysql');
 5 | const cors = require('cors')
 6 | 
 7 | const app = express();
 8 | app.use(cors())
 9 | 
10 | const schema = buildSchema(`
11 |   type User {
12 |     id: String
13 |     name: String
14 |     job_title: String
15 |     email: String
16 |   }
17 |   type Query {
18 |     getUsers: [User],
19 |     getUserInfo(id: Int) : User
20 |   }
21 |   type Mutation {
22 |     updateUserInfo(id: Int, name: String, email: String, job_title: String) : Boolean
23 |     createUser(name: String, email: String, job_title: String) : Boolean
24 |     deleteUser(id: Int) : Boolean
25 |   }
26 | `);
27 | 
28 | const queryDB = (req, sql, args) => new Promise((resolve, reject) => {
29 |     req.mysqlDb.query(sql, args, (err, rows) => {
30 |         if (err)
31 |             return reject(err);
32 |         rows.changedRows || rows.affectedRows || rows.insertId ? resolve(true) : resolve(rows);
33 |     });
34 | });
35 | 
36 | const root = {
37 |   getUsers: (args, req) => queryDB(req, "select * from users").then(data => data),
38 |   getUserInfo: (args, req) => queryDB(req, "select * from users where id = ?", [args.id]).then(data => data[0]),
39 |   updateUserInfo: (args, req) => queryDB(req, "update users SET ? where id = ?", [args, args.id]).then(data => data),
40 |   createUser: (args, req) => queryDB(req, "insert into users SET ?", args).then(data => data),
41 |   deleteUser: (args, req) => queryDB(req, "delete from users where id = ?", [args.id]).then(data => data)
42 | };
43 | 
44 | app.use((req, res, next) => {
45 |   req.mysqlDb = mysql.createConnection({
46 |     host     : 'localhost',
47 |     user     : 'root',
48 |     password : '',
49 |     database : 'userapp'
50 |   });
51 |   req.mysqlDb.connect();
52 |   next();
53 | });
54 | 
55 | app.use('/graphql', graphqlHTTP({
56 |   schema: schema,
57 |   rootValue: root,
58 |   graphiql: true,
59 | }));
60 | 
61 | app.listen(4000);
62 | 
63 | console.log('Running a GraphQL API server at localhost:4000/graphql');
64 | 


--------------------------------------------------------------------------------