├── .babelrc
├── .gitignore
├── package-lock.json
├── package.json
├── src
    ├── index.js
    ├── models
    │   └── dog.js
    ├── resolver.js
    └── typeDefs.js
└── vue-graph-you
    ├── .browserslistrc
    ├── .eslintrc.js
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
        ├── favicon.ico
        └── index.html
    └── src
        ├── App.vue
        ├── assets
            └── logo.png
        ├── components
            └── HelloWorld.vue
        ├── graphql
            ├── allTodos.gql
            └── register.gql
        ├── main.js
        ├── router.js
        ├── views
            ├── About.vue
            └── Home.vue
        └── vue-apollo.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/preset-env"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "graphql-example",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "nodemon --exec babel-node src/index.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "@babel/cli": "^7.4.3",
14 |     "@babel/core": "^7.4.3",
15 |     "@babel/node": "^7.2.2",
16 |     "@babel/preset-env": "^7.4.3",
17 |     "nodemon": "^1.18.11"
18 |   },
19 |   "dependencies": {
20 |     "apollo-server-express": "^2.4.8",
21 |     "express": "^4.16.4",
22 |     "graphql": "^14.2.1",
23 |     "mongoose": "^5.5.3"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import mongoose from "mongoose";
 3 | import { ApolloServer, gql} from "apollo-server-express";
 4 | import {resolvers} from "./resolver";
 5 | import { typeDefs } from "./typeDefs";
 6 | 
 7 | 
 8 | const server = async () => {
 9 |     const app = express();
10 |     const server = new ApolloServer({
11 |         typeDefs,
12 |         resolvers
13 |     })
14 | 
15 |     server.applyMiddleware({app});
16 | 
17 |     try{
18 | 
19 |         await mongoose.connect("mongodb+srv://<user>:<password>@<connectionstring>", {useNewUrlParser: true})
20 |     }catch(err){
21 |         console.log(err)
22 |     }
23 | 
24 | 
25 |     app.get('/', (req, res) => res.send('hello world'))
26 | 
27 |     app.listen({port: 4001}, ()=> {
28 |         console.log('connected')
29 |     })
30 | 
31 | }
32 | 
33 | server();


--------------------------------------------------------------------------------
/src/models/dog.js:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | export const Dog = mongoose.model("Dog", { name: String})
3 | 


--------------------------------------------------------------------------------
/src/resolver.js:
--------------------------------------------------------------------------------
 1 | import { Dog } from "./models/dog";
 2 | 
 3 | export const resolvers = {
 4 |     Query: {
 5 |         helloWorld:() => 'hello world',
 6 |         dogs: () => Dog.find()
 7 | 
 8 |     },
 9 |     Mutation: {
10 |         createDog: async(_, { name }) => {
11 |             const puppy = new Dog({ name });
12 |             await puppy.save();
13 |             return puppy;
14 |         }
15 |     }
16 | }


--------------------------------------------------------------------------------
/src/typeDefs.js:
--------------------------------------------------------------------------------
 1 | import { gql } from 'apollo-server-express';
 2 | 
 3 | export const typeDefs = gql`
 4 | 
 5 | type Query {
 6 |     helloWorld: String!
 7 |     dogs: [Dog!]!
 8 | }
 9 | 
10 | type Dog {
11 |     id: ID!
12 |     name: String!
13 | }
14 | 
15 | type Mutation {
16 |     createDog(name: String!): Dog!
17 | }
18 | 
19 | `;


--------------------------------------------------------------------------------
/vue-graph-you/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/vue-graph-you/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10 |   },
11 |   parserOptions: {
12 |     parser: "babel-eslint"
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/vue-graph-you/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/vue-graph-you/README.md:
--------------------------------------------------------------------------------
 1 | # vue-graph-you
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/vue-graph-you/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/app"]
3 | };
4 | 


--------------------------------------------------------------------------------
/vue-graph-you/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-graph-you",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^2.6.5",
12 |     "vue": "^2.6.10",
13 |     "vue-apollo": "^3.0.0-beta.11",
14 |     "vue-router": "^3.0.3"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.7.0",
18 |     "@vue/cli-plugin-eslint": "^3.7.0",
19 |     "@vue/cli-service": "^3.7.0",
20 |     "@vue/eslint-config-prettier": "^4.0.1",
21 |     "babel-eslint": "^10.0.1",
22 |     "eslint": "^5.16.0",
23 |     "eslint-plugin-vue": "^5.0.0",
24 |     "graphql-tag": "^2.9.0",
25 |     "vue-cli-plugin-apollo": "^0.20.0",
26 |     "vue-template-compiler": "^2.5.21"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/vue-graph-you/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/vue-graph-you/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ErikCH/VueApolloGraphQL/609382ffa5d85a4726cbf6f3a93e543feb890a6b/vue-graph-you/public/favicon.ico


--------------------------------------------------------------------------------
/vue-graph-you/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-graph-you</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-graph-you doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/about">About</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 
11 | <style>
12 | #app {
13 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | #nav {
20 |   padding: 30px;
21 | }
22 | 
23 | #nav a {
24 |   font-weight: bold;
25 |   color: #2c3e50;
26 | }
27 | 
28 | #nav a.router-link-exact-active {
29 |   color: #42b983;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ErikCH/VueApolloGraphQL/609382ffa5d85a4726cbf6f3a93e543feb890a6b/vue-graph-you/src/assets/logo.png


--------------------------------------------------------------------------------
/vue-graph-you/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <ApolloMutation
 4 |       :mutation="require('../graphql/register.gql')"
 5 |       :variables="{email, password}"
 6 |       @done="onDone"
 7 |     >
 8 |       <template v-slot="{mutate}">
 9 |         <form v-on:submit.prevent=" mutate()">
10 |           <label for="email">Email</label>
11 |           <input v-model="email" type="email" id="email">
12 |           <label for="password">Password</label>
13 |           <input v-model="password" type="password" id="password">
14 |           <button @click="mutate()">Submit</button>
15 |         </form>
16 |       </template>
17 |     </ApolloMutation>
18 |     {{token}}
19 |     <!-- <div v-for="todo in allTodos" :key="todo.id">{{todo.title}}</div>-->
20 |     <!-- <ApolloQuery
21 |       :query="gql => gql`
22 |                           query {
23 |                               allTodos {
24 |                               title
25 |                               id
26 |                             }
27 |                           } `"
28 |     >-->
29 |     <!-- <input type="text" v-model.number="count"> -->
30 |     <ApolloQuery :query="require('../graphql/allTodos.gql')" :variables="{count}">
31 |       <template v-slot="{ result: { loading, error, data } }">
32 |         <div v-if="data">
33 |           <div v-for="todo in data.allTodos" :key="todo.id">{{todo.title}}</div>
34 |         </div>
35 |       </template>
36 |     </ApolloQuery>
37 |   </div>
38 | </template>
39 | 
40 | <script>
41 | import gql from "graphql-tag";
42 | export default {
43 |   name: "HelloWorld",
44 |   data() {
45 |     return {
46 |       count: 4,
47 |       email: "",
48 |       password: "",
49 |       token: ""
50 |     };
51 |   },
52 |   props: {
53 |     msg: String
54 |   },
55 |   methods: {
56 |     onDone(val) {
57 |       this.token = val.data.register.token;
58 |     }
59 |   },
60 |   apollo: {
61 |     allTodos: gql`
62 |       query {
63 |         allTodos(count: 5) {
64 |           title
65 |           id
66 |         }
67 |       }
68 |     `
69 |   }
70 | };
71 | </script>
72 | 
73 | <!-- Add "scoped" attribute to limit CSS to this component only -->
74 | <style scoped>
75 | h3 {
76 |   margin: 40px 0 0;
77 | }
78 | ul {
79 |   list-style-type: none;
80 |   padding: 0;
81 | }
82 | li {
83 |   display: inline-block;
84 |   margin: 0 10px;
85 | }
86 | a {
87 |   color: #42b983;
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/graphql/allTodos.gql:
--------------------------------------------------------------------------------
1 | query allTodos($count: Int!) {
2 |   allTodos(count: $count) {
3 |     title
4 |     id
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/graphql/register.gql:
--------------------------------------------------------------------------------
1 | mutation Register($email: String!, $password: String!) {
2 |   register(email: $email, password: $password) {
3 |     token
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import { createProvider } from "./vue-apollo";
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | new Vue({
 9 |   router,
10 |   apolloProvider: createProvider(),
11 |   render: h => h(App)
12 | }).$mount("#app");
13 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import Home from "./views/Home.vue";
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |   mode: "history",
 9 |   base: process.env.BASE_URL,
10 |   routes: [
11 |     {
12 |       path: "/",
13 |       name: "home",
14 |       component: Home
15 |     },
16 |     {
17 |       path: "/about",
18 |       name: "about",
19 |       // route level code-splitting
20 |       // this generates a separate chunk (about.[hash].js) for this route
21 |       // which is lazy-loaded when the route is visited.
22 |       component: () =>
23 |         import(/* webpackChunkName: "about" */ "./views/About.vue")
24 |     }
25 |   ]
26 | });
27 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import HelloWorld from "@/components/HelloWorld.vue";
10 | 
11 | export default {
12 |   name: "home",
13 |   components: {
14 |     HelloWorld
15 |   }
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/vue-graph-you/src/vue-apollo.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import VueApollo from 'vue-apollo';
  3 | import {
  4 |   createApolloClient,
  5 |   restartWebsockets
  6 | } from 'vue-cli-plugin-apollo/graphql-client';
  7 | 
  8 | // Install the vue plugin
  9 | Vue.use(VueApollo);
 10 | 
 11 | // Name of the localStorage item
 12 | const AUTH_TOKEN = 'apollo-token';
 13 | 
 14 | // Http endpoint
 15 | const httpEndpoint =
 16 |   process.env.VUE_APP_GRAPHQL_HTTP ||
 17 |   'https://fakerql.com/graphql';
 18 | // Files URL root
 19 | export const filesRoot =
 20 |   process.env.VUE_APP_FILES_ROOT ||
 21 |   httpEndpoint.substr(0, httpEndpoint.indexOf('/graphql'));
 22 | 
 23 | Vue.prototype.$filesRoot = filesRoot;
 24 | 
 25 | // Config
 26 | const defaultOptions = {
 27 |   // You can use `https` for secure connection (recommended in production)
 28 |   httpEndpoint,
 29 |   // You can use `wss` for secure connection (recommended in production)
 30 |   // Use `null` to disable subscriptions
 31 |   wsEndpoint: null,
 32 |   // LocalStorage token
 33 |   tokenName: AUTH_TOKEN,
 34 |   // Enable Automatic Query persisting with Apollo Engine
 35 |   persisting: false,
 36 |   // Use websockets for everything (no HTTP)
 37 |   // You need to pass a `wsEndpoint` for this to work
 38 |   websocketsOnly: false,
 39 |   // Is being rendered on the server?
 40 |   ssr: false
 41 | 
 42 |   // Override default apollo link
 43 |   // note: don't override httpLink here, specify httpLink options in the
 44 |   // httpLinkOptions property of defaultOptions.
 45 |   // link: myLink
 46 | 
 47 |   // Override default cache
 48 |   // cache: myCache
 49 | 
 50 |   // Override the way the Authorization header is set
 51 |   // getAuth: (tokenName) => ...
 52 | 
 53 |   // Additional ApolloClient options
 54 |   // apollo: { ... }
 55 | 
 56 |   // Client local data (see apollo-link-state)
 57 |   // clientState: { resolvers: { ... }, defaults: { ... } }
 58 | };
 59 | 
 60 | // Call this in the Vue app file
 61 | export function createProvider(options = {}) {
 62 |   // Create apollo client
 63 |   const { apolloClient, wsClient } = createApolloClient({
 64 |     ...defaultOptions,
 65 |     ...options
 66 |   });
 67 |   apolloClient.wsClient = wsClient;
 68 | 
 69 |   // Create vue apollo provider
 70 |   const apolloProvider = new VueApollo({
 71 |     defaultClient: apolloClient,
 72 |     defaultOptions: {
 73 |       $query: {
 74 |         // fetchPolicy: 'cache-and-network',
 75 |       }
 76 |     },
 77 |     errorHandler(error) {
 78 |       // eslint-disable-next-line no-console
 79 |       console.log(
 80 |         '%cError',
 81 |         'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;',
 82 |         error.message
 83 |       );
 84 |     }
 85 |   });
 86 | 
 87 |   return apolloProvider;
 88 | }
 89 | 
 90 | // Manually call this when user log in
 91 | export async function onLogin(apolloClient, token) {
 92 |   if (typeof localStorage !== 'undefined' && token) {
 93 |     localStorage.setItem(AUTH_TOKEN, token);
 94 |   }
 95 |   if (apolloClient.wsClient)
 96 |     restartWebsockets(apolloClient.wsClient);
 97 |   try {
 98 |     await apolloClient.resetStore();
 99 |   } catch (e) {
100 |     // eslint-disable-next-line no-console
101 |     console.log(
102 |       '%cError on cache reset (login)',
103 |       'color: orange;',
104 |       e.message
105 |     );
106 |   }
107 | }
108 | 
109 | // Manually call this when user log out
110 | export async function onLogout(apolloClient) {
111 |   if (typeof localStorage !== 'undefined') {
112 |     localStorage.removeItem(AUTH_TOKEN);
113 |   }
114 |   if (apolloClient.wsClient)
115 |     restartWebsockets(apolloClient.wsClient);
116 |   try {
117 |     await apolloClient.resetStore();
118 |   } catch (e) {
119 |     // eslint-disable-next-line no-console
120 |     console.log(
121 |       '%cError on cache reset (logout)',
122 |       'color: orange;',
123 |       e.message
124 |     );
125 |   }
126 | }
127 | 


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