Skip to content

Commit 1ab3cc8

Browse files
PierBoverPierBover
committed
first commit
1 parent f9741e4 commit 1ab3cc8

11 files changed

+255
-1
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
]
5+
}

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log

‎Graphcool.schema

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
type Color implements Node {
2+
createdAt: DateTime!
3+
fruits: [Fruit!]! @relation(name: "FruitOnColor")
4+
hex: String!
5+
id: ID! @isUnique
6+
name: String!
7+
updatedAt: DateTime!
8+
}
9+
10+
type File implements Node {
11+
contentType: String!
12+
createdAt: DateTime!
13+
id: ID! @isUnique
14+
name: String!
15+
secret: String! @isUnique
16+
size: Int!
17+
updatedAt: DateTime!
18+
url: String! @isUnique
19+
}
20+
21+
type Fruit implements Node {
22+
color: Color @relation(name: "FruitOnColor")
23+
createdAt: DateTime!
24+
id: ID! @isUnique
25+
name: String!
26+
updatedAt: DateTime!
27+
}
28+
29+
type User implements Node {
30+
createdAt: DateTime!
31+
id: ID! @isUnique
32+
updatedAt: DateTime!
33+
}

‎README.md

+17-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
# vuex-apollo-example-project
1+
# apollo-vuex-example
2+
3+
An example Vue project based on the Vue template `webpack-simple`. It uses Vuex and vanilla Apollo Client.
4+
5+
I wrote this since everyone seems to be using `vue-apollo` which encourages to put the GraphQL queries in Vue componentes. **This is an antipattern and should never be done**. The whole point of using Vuex is to centralize state and decouple your data layer code from your components.
6+
7+
I've included the [Graphcool](https://www.graph.cool) schema so you can replicate this. Just copy pasta the schema into the Graphcool console, add some data, and then paste the simple API endpoint in the file `apollo.js` where it says `YOUR_GRAPH_QL_ENDPOINT_HERE`.
8+
9+
## Build Setup
10+
11+
``` bash
12+
# install dependencies
13+
npm install
14+
15+
# serve with hot reload at localhost:8080
16+
npm run dev
17+
```

‎apollo.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import ApolloClient, { createNetworkInterface } from 'apollo-client';
2+
3+
const client = new ApolloClient({
4+
networkInterface: createNetworkInterface({
5+
uri: 'YOUR_GRAPH_QL_ENDPOINT_HERE',
6+
}),
7+
});
8+
9+
export default client;

‎index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>apollo-vuex-example</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "apollo-vuex-example",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "Pier Bover <[email protected]>",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"apollo-client": "^1.4.2",
13+
"vue": "^2.3.3",
14+
"vuex": "^2.3.1"
15+
},
16+
"devDependencies": {
17+
"babel-core": "^6.0.0",
18+
"babel-loader": "^6.0.0",
19+
"babel-preset-env": "^1.5.1",
20+
"cross-env": "^3.0.0",
21+
"css-loader": "^0.25.0",
22+
"file-loader": "^0.9.0",
23+
"vue-loader": "^12.1.0",
24+
"vue-template-compiler": "^2.3.3",
25+
"webpack": "^2.6.1",
26+
"webpack-dev-server": "^2.4.5"
27+
}
28+
}

‎src/App.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div id="app">
3+
<h1>Some fruits</h1>
4+
<ul v-if="fruits">
5+
<li v-for="fruit in fruits">{{fruit.name}} <em>{{fruit.color.name}}</em></li>
6+
</ul>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'app',
13+
computed: {
14+
fruits(){
15+
return this.$store.state.fruits;
16+
}
17+
},
18+
mounted(){
19+
this.$store.dispatch('getFruits');
20+
}
21+
}
22+
</script>
23+
24+
<style>
25+
body {
26+
font-family: sans-serif;
27+
margin: 3rem;
28+
}
29+
</style>

‎src/main.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
import store from '../store.js';
4+
5+
new Vue({
6+
store,
7+
el: '#app',
8+
render: h => h(App)
9+
})

‎store.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Vue from 'vue';
2+
import Vuex from 'vuex';
3+
import apolloClient from './apollo.js';
4+
5+
import gql from 'graphql-tag';
6+
7+
Vue.use(Vuex);
8+
9+
const store = new Vuex.Store({
10+
state: {
11+
fruits: []
12+
},
13+
mutations: {
14+
SET_FRUITS(state, fruits){
15+
console.log(fruits);
16+
state.fruits = fruits;
17+
}
18+
},
19+
actions: {
20+
getFruits(context){
21+
apolloClient.query({
22+
query: gql`
23+
{
24+
allFruits {
25+
name
26+
color {
27+
name
28+
}
29+
}
30+
}
31+
`
32+
}).then((result) => {
33+
context.commit('SET_FRUITS', result.data.allFruits);
34+
})
35+
}
36+
}
37+
});
38+
39+
export default store;

‎webpack.config.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.vue$/,
15+
loader: 'vue-loader',
16+
options: {
17+
loaders: {
18+
}
19+
// other vue-loader options go here
20+
}
21+
},
22+
{
23+
test: /\.js$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/
26+
},
27+
{
28+
test: /\.(png|jpg|gif|svg)$/,
29+
loader: 'file-loader',
30+
options: {
31+
name: '[name].[ext]?[hash]'
32+
}
33+
}
34+
]
35+
},
36+
resolve: {
37+
alias: {
38+
'vue$': 'vue/dist/vue.esm.js'
39+
}
40+
},
41+
devServer: {
42+
historyApiFallback: true,
43+
noInfo: true
44+
},
45+
performance: {
46+
hints: false
47+
},
48+
devtool: '#eval-source-map'
49+
}
50+
51+
if (process.env.NODE_ENV === 'production') {
52+
module.exports.devtool = '#source-map'
53+
// http://vue-loader.vuejs.org/en/workflow/production.html
54+
module.exports.plugins = (module.exports.plugins || []).concat([
55+
new webpack.DefinePlugin({
56+
'process.env': {
57+
NODE_ENV: '"production"'
58+
}
59+
}),
60+
new webpack.optimize.UglifyJsPlugin({
61+
sourceMap: true,
62+
compress: {
63+
warnings: false
64+
}
65+
}),
66+
new webpack.LoaderOptionsPlugin({
67+
minimize: true
68+
})
69+
])
70+
}

0 commit comments

Comments
 (0)