├── .github
└── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── client
├── README.md
├── dist
│ └── main.js
├── index.html
├── package-lock.json
├── package.json
└── src
│ └── index.js
└── server
├── README.md
├── from-rest
└── index.js
├── package-lock.json
├── package.json
├── resolvers.js
├── schema.js
├── server.js
└── users.json
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: time-to-hack
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | .DS_Store
61 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Time to Hack
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # graphql-demo
2 |
3 | [](http://hits.dwyl.io/time2hack/graphql-demo)
4 |
5 | GraphQL is an API query language. It provides a runtime to describe and query the data, no matter what the storage engine is.
6 |
7 | GraphQL's benefits include
8 |
9 | Typed data
10 | Get what you asked for
11 | Multiple data requests in one call
12 | One endpoint, changes in API are now bit easier
13 | Subscriptions
14 | etc.
15 | For example, consider a system similar to a social network where we have users and they have other users as friends. Following entity will completely encapsulate the data model; how it is going to be dealt in Back End and Front End, we will see after that.
16 | ```graphql
17 | type User {
18 | id: String!
19 | fullName: String
20 | name: Name
21 | email: String!
22 | friends: [User]
23 | }
24 | type Name {
25 | first: String
26 | last: String
27 | }
28 | ```
29 | For this data description, the front end will sent the request to data as follows:
30 | ```graphql
31 | {
32 | user(id: "5a826fdf9856ad6503d728d5") {
33 | id
34 | name {
35 | first
36 | last
37 | }
38 | email
39 | friends {
40 | id
41 | email
42 | }
43 | }
44 | }
45 | ```
46 | And will receive the response as follows:
47 | ```json
48 | {
49 | "data": {
50 | "user": {
51 | "id": "5a826fdf9856ad6503d728d5",
52 | "name": {
53 | "first": "Stanton",
54 | "last": "Hansen"
55 | },
56 | "email": "stanton.hansen@example.com",
57 | "friends": [
58 | {
59 | "id": "5a826fdf0d054a6fab7bb067",
60 | "email": "barr.wolf@example.com"
61 | },
62 | ...
63 | {
64 | "id": "5a826fdf0d054a6fab7bb067",
65 | "email": "barr.wolf@example.com"
66 | }
67 | ]
68 | }
69 | }
70 | }
71 | ```
72 | And the good part is that the data can be from any interface, be it the RDBMS, NoSQL DB, a File or even in-memory operation.
73 |
74 | [Read how to use Server](./server/README.md)
75 |
76 | [Read how to use Client](./client/README.md)
77 |
78 | Read full post at https://time2hack.com/2018/02/introduction-quick-guide-to-graphql-for-backend-frontend/
79 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # graphql-demo: Front End Client
2 |
3 | ### dependencies
4 |
5 | ```
6 | npm i -D webpack@next webpack-cli
7 |
8 | npm i -S graphql graphql-tag apollo-cache-inmemory apollo-client apollo-link-http
9 | ```
10 |
11 | ### Compiling
12 |
13 | ```
14 | npm run build
15 | ```
16 | or
17 | ```
18 | npm run start
19 | ```
20 |
21 | Use [`http-server`](https://www.npmjs.com/package/http-server) to serve files
22 |
23 | -----
24 |
25 | Read full post at https://time2hack.com/2018/02/introduction-quick-guide-to-graphql-for-backend-frontend/
26 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | GraphQL Demo: Time to Hack
7 |
8 |
9 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@graphql-demo/client",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "webpack --mode=production",
8 | "start": "webpack --mode=development --watch"
9 | },
10 | "keywords": [],
11 | "author": "Pankaj Patel",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "webpack": "^5.75.0",
15 | "webpack-cli": "^5.0.1",
16 | "webpack-dev-server": "^4.11.1"
17 | },
18 | "dependencies": {
19 | "apollo-cache-inmemory": "^1.1.7",
20 | "apollo-client": "^2.2.3",
21 | "apollo-link-http": "^1.3.3",
22 | "graphql": "^0.13.0",
23 | "graphql-tag": "^2.7.3"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import { ApolloClient } from 'apollo-client';
2 | import { HttpLink } from 'apollo-link-http';
3 | import { InMemoryCache } from 'apollo-cache-inmemory';
4 | import gql from 'graphql-tag';
5 |
6 | const client = new ApolloClient({
7 | link: new HttpLink({ uri: 'http://localhost:3000/graphql' }),
8 | cache: new InMemoryCache()
9 | });
10 |
11 | client.query({
12 | query: gql`
13 | query users {
14 | users {
15 | id
16 | fullName
17 | email
18 | }
19 | }
20 | `,
21 | })
22 | .then(({data}) => appendData(data))
23 | .catch(error => console.error(error));
24 |
25 | const appendData = (data) => {
26 | console.log(data);
27 | const app = document.querySelector('#app');
28 | app.innerHTML = '';
29 | data.users.map(user => {
30 | const d = document.createElement('div');
31 | d.innerHTML = `
32 |
${user.fullName}
33 |
${user.email}
34 |